有什么excel.js支持IE11,可以显示EXCEL单元格数据,支持单元格合并,边框线,单元格背景

有什么excel.js支持IE11,可以显示EXCEL单元格数据,支持单元格合并,边框线,单元格背景

在 IE11 环境下操作 Excel 且需要支持单元格合并、边框、背景等格式时，需考虑兼容性较强的库。以下是符合需求的工具及对比分析：

1. SheetJS（js-xlsx）

兼容性：支持 IE11（需搭配 polyfill）。
核心功能：

• 解析 / 生成 Excel 文件（XLSX 格式），支持单元格格式（合并、边框、背景等）。
• 可操作 worksheet 对象，直接修改单元格属性。
• 支持从 HTML 表格（<table>）生成 Excel，或反向渲染 Excel 数据到页面。

使用示例：javascript

// 引入库（需提前加载 xlsx.full.min.js 和 es5-shim.min.js 兼容 IE11）
import XLSX from 'xlsx';

// 读取 Excel 文件
const file = document.getElementById('file').files[0];
const reader = new FileReader();
reader.onload = function(e) {
  const data = e.target.result;
  const workbook = XLSX.read(data, { type: 'array' });
  const worksheet = workbook.Sheets[workbook.SheetNames[0]];
  
  // 遍历单元格数据（含格式）
  const range = XLSX.utils.decode_range(worksheet['!ref']);
  for (let row = range.s.r; row <= range.e.r; row++) {
    for (let col = range.s.c; col <= range.e.c; col++) {
      const cell = worksheet[XLSX.utils.encode_cell({ r: row, c: col })];
      console.log('值:', cell.v);
      console.log('格式:', cell.s); // 包含合并、边框、背景等信息
    }
  }
};
reader.readAsArrayBuffer(file);

格式支持细节：

• 合并单元格：通过 worksheet['!merges'] 属性管理合并区域。
• 边框：单元格样式 cell.s.border 包含上下左右边框信息（需按 SheetJS 格式定义）。
• 背景色：通过 cell.s.fill 属性设置，支持 RGB 颜色值（如 { fgColor: { rgb: 'FFFFFF' } }）。

局限性：

• 需手动处理格式转换（如边框、背景的对象结构）。
• 纯数据操作库，若需在页面可视化 Excel 样式，需配合 HTML/CSS 自行渲染。

2. Handsontable（配合 Excel 导出插件）

兼容性：支持 IE11（需手动引入兼容补丁）。
核心功能：

• 基于 HTML5 的表格控件，可直接在页面渲染类似 Excel 的交互界面（含合并单元格、边框、背景色）。
• 搭配 handsontable-pro 和 @handsontable/excel 插件，支持导入 / 导出 Excel 文件并保留格式。

使用示例：html

<!-- 引入 Handsontable 及插件 -->
<link rel="stylesheet" href="handsontable.full.min.css">
<script src="handsontable.full.min.js"></script>
<script src="@handsontable/excel.min.js"></script>

<div id="hot"></div>

<script>
  const container = document.getElementById('hot');
  const hot = new Handsontable(container, {
    data: [['A1', 'B1', 'C1'], ['A2', 'B2', 'C2']],
    columns: [{ data: 0 }, { data: 1 }, { data: 2 }],
    // 启用合并单元格
    mergeCells: true,
    // 定义合并区域
    mergedCells: [{ row: 0, col: 0, rowspan: 2, colspan: 2 }],
    // 启用边框样式（需自定义 CSS）
    className: 'htBorder',
    // 单元格背景色（通过条件格式或直接设置）
    cells: function(row, col, prop) {
      const cellProperties = {};
      if (row === 0 && col === 0) {
        cellProperties.background = '#FFFF00'; // 黄色背景
      }
      return cellProperties;
    }
  });

  // 导出为 Excel（含格式）
  document.getElementById('export-btn').addEventListener('click', () => {
    Handsontable.plugins.Excel.download(hot, 'data.xlsx');
  });
</script>

格式支持细节：

• 合并单元格：通过 mergeCells 和 mergedCells 属性直接配置。
• 边框：需通过自定义 CSS 实现（如 .htBorder { border: 1px solid #000; }）。
• 背景色：支持通过 cells 钩子函数或条件格式设置。

优势：

• 可视化效果接近 Excel，支持用户直接编辑。
• 导出的 Excel 可保留页面渲染的格式（合并、背景等）。
  局限性：
• 免费版功能有限，完整格式支持需购买专业版。
• 体积较大，首次加载时间较长。

3. TableExport.js（轻量级导出工具）

兼容性：支持 IE11（需引入 Blob.js 和 FileSaver.js 兼容库）。
核心功能：

• 基于 jQuery 的插件，可将 HTML 表格导出为 Excel（XLSX/CSV），保留表格的合并单元格、边框、背景等样式（需 HTML 原生支持）。

使用示例：

<!-- 引入依赖 -->
<link rel="stylesheet" href="tableexport.css">
<script src="jquery.min.js"></script>
<script src="Blob.js"></script>
<script src="FileSaver.js"></script>
<script src="tableexport.min.js"></script>

<table id="my-table" class="table">
  <tr>
    <td rowspan="2" style="border: 1px solid #000; background: #F0F0F0;">合并单元格</td>
    <td>单元格 1</td>
  </tr>
  <tr>
    <td>单元格 2</td>
  </tr>
</table>

<script>
  $('#my-table').tableExport({
    type: 'xlsx',
    filename: 'data',
    // 保留 HTML 样式
    stylized: true
  });
</script>

格式支持细节：

• 合并单元格：依赖 HTML 的 rowspan/colspan 属性。
• 边框 / 背景：通过 HTML style 属性或 CSS 类定义，导出时自动映射到 Excel 格式。

优势：

• 轻量级，无需复杂配置，适合简单场景。
• 直接基于 HTML 结构导出，格式一致性高。
  局限性：
• 仅支持导出，无法解析已有的 Excel 文件。
• 复杂格式（如非矩形合并区域）可能导出异常。

兼容性处理建议

1. 引入 polyfill：

   • 为 IE11 加载 es5-shim.min.js、es6-shim.min.js 和 fetch polyfill，确保 JS 语法兼容。
   • 示例 CDN 地址：

     <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch"></script>
     

2. 测试重点：

   • 合并单元格的范围是否正确（IE11 对 JS 对象的处理可能存在差异）。
   • 边框和背景色的渲染是否与预期一致（部分 CSS 样式需添加 IE 私有前缀）。

总结对比

推荐优先级：

• 若需纯数据处理（如解析现有 Excel 文件）：选 SheetJS。
• 若需前端可视化编辑 + 导出：选 Handsontable（专业版功能更全面）。
• 若只需轻量级导出 HTML 表格：选 TableExport.js