当前位置：首页 > article >正文

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

article 2025/9/9 19:25:16

在 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 文件。
复杂格式（如非矩形合并区域）可能导出异常。

兼容性处理建议

引入 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>
```
测试重点：
- 合并单元格的范围是否正确（IE11 对 JS 对象的处理可能存在差异）。
- 边框和背景色的渲染是否与预期一致（部分 CSS 样式需添加 IE 私有前缀）。

总结对比

工具	核心场景	格式支持完整度	学习成本	兼容性
SheetJS	后端数据处理、格式解析	★★★★☆	高	需 polyfill
Handsontable	前端可视化编辑、导出	★★★★★	中	需兼容补丁
TableExport.js	简单 HTML 转 Excel	★★★☆☆	低	原生支持