HTML导出是用data URI欺骗Excel解析HTML,本质为伪Excel;而Excel下载是生成标准OOXML/BIFF二进制文件。前者兼容差、样式不稳、中文易乱码、仅支持.xls且报错频繁;后者通过xlsx库生成真.xlsx,支持公式、多表、全浏览器,无警告,适合正式交付。

HTML导出 ≠ Excel下载——前者是把 HTML 字符串塞进 data: URI 里骗 Excel 打开,后者是真正生成符合 OOXML 或 BIFF 格式的二进制文件。用户点“下载”时感觉一样,但底层行为、兼容性、样式保留能力差得远。
用 data:application/vnd.ms-excel 导出 HTML 表格的本质
这其实是“伪 Excel”:浏览器把一段带 <table> 的 HTML 文本,用 base64 编码后拼成 Data URI,扔给 Excel。Excel 自己解析渲染,不走任何标准 Excel 格式解析器。<ul>
<li>优点:零依赖、纯前端、快</li>
<li>缺点:<code>Excel 打开报“文件格式与扩展名不匹配” 是常态;合并单元格、列宽控制靠 <col width="80"> 这种 HTML 属性,效果不稳定;中文乱码常见(必须确保 <meta charset="UTF-8"> 在模板里且生效)
.xlsx 完全不认这种写法
download 属性设对了,文件名才真的生效
很多人写了 a.href = 'data:...' 却发现下载下来总是 download.xls 或随机名,问题几乎全出在 download 属性没设或设晚了。
- 必须显式设置:
a.download = name + '.xls',且name不能含路径、特殊字符(如/ \ : * ? " |) - 必须在
a.click()前设置,DOM 插入后立刻设,不要等异步回调 - 注意:Safari 不支持
download属性对 Data URI 的作用,iOS 全平台基本不可用 - 替代方案(仅限 Safari):
window.open(a.href),但会新开窗口,且无自定义文件名
为什么 XLSX.utils.table_to_sheet() 比直接拼 HTML 更可靠
用 SheetJS(即 xlsx 库)走标准路径,才是真正“导出 Excel”:它把 DOM 表格转成二维数组 → 生成 Worksheet 对象 → 写入 Workbook → 输出 .xlsx 二进制流。
立即学习“前端免费学习笔记(深入)”;
-
table_to_sheet()自动处理<thead>/<code><tbody> 结构,忽略非表格节点;<code>aoa_to_sheet()要你手动遍历<tr><td>,容易漏掉 <code>rowspan/colspan - 生成的文件是真
.xlsx,双击打开无警告,支持公式、条件格式(需额外配置)、多 sheet - 体积略大(库约 150KB),但换来的是 IE11+、Chrome 90+、Edge、Firefox 全覆盖,且无乱码风险
- 注意:服务端若用 Apache POI,前端就别混用 Data URI 方案,否则字段类型(如日期、数字)解析不一致
真正要交付给财务、审计这类角色的报表,别碰 data: URI 那套。能走后端生成(POI / EPPlus)就走后端;必须前端做,就用 xlsx 库。那些“改个 download 就能搞定”的方案,上线后八成卡在合并单元格或时间字段上。



















