导出HTML表格需使用规范table结构、避免data URI兼容问题、推荐SheetJS或服务端生成。必须用语义化table标签，禁用div模拟；data:application/vnd.ms-excel在新浏览器中失效，应改用Blob；复杂场景用SheetJS生成xlsx；生产环境优先服务端导出。
导出 HTML 表格时，table 结构必须规范
浏览器原生不支持直接把任意 <div> 布局当表格导出，只有语义正确、嵌套合规的 <table> 才能被 Excel 正确识别。常见错误是用 <div> + CSS 模拟表格，或漏写 <thead>/<tbody>，导致导出后列错位、样式丢失甚至空白文件。
- 确保每行用
<tr>，每个单元格用<td>或<th>，不要混用<span>或<div>替代 - 合并单元格必须用
rowspan和colspan，不能靠 CSSdisplay: table-cell模拟 - 避免在
<table>内嵌套其他<table>—— Excel 只解析最外层
用 data:application/vnd.ms-excel 导出存在兼容性问题
老式方案如 location.href = 'data:application/vnd.ms-excel,...' 在 Chrome 110+ 和 Safari 中已被拦截或失效，且无法设置文件名、不支持 UTF-8 中文（常乱码），也不兼容 Excel 2016+ 的严格格式校验。
- 现代浏览器对
data:URI 的 MIME 类型校验变严，vnd.ms-excel已被视作不安全 - 中文字段若未加
<meta charset="UTF-8">且未在 data URL 中声明;charset=utf-8，Excel 打开时大概率显示“#VALUE!”或方块 - 推荐改用 Blob +
URL.createObjectURL()，它能可靠触发下载，并支持自定义文件名
用 SheetJS (xlsx) 处理复杂表格更稳妥
纯 HTML 表格导出只适用于简单场景；一旦涉及跨页分页、多级表头、数字格式（如金额保留两位小数）、日期自动识别或合并单元格逻辑，手写 HTML 字符串极易出错。SheetJS 是目前最成熟的前端 Excel 库，可直接读取 DOM <table> 并生成标准 .xlsx 文件。
诊断并修复涉及公式、命名范围、Power Query 刷新、数据透视表、VBA/宏保存等问题的 Microsoft Excel XLSX 工作簿
- 引入方式：
<script src="https://cdn.sheetjs.com/xlsx-0.20.1/xlsx.full.min.js"></script> - 导出调用：
const wb = XLSX.utils.table_to_book(document.querySelector("table")); XLSX.writeFile(wb, "data.xlsx"); - 注意：若表格含
<input>或动态渲染内容，需先同步值到<td>文本节点，否则导出为空 - 性能提示：超过 5000 行建议加 loading 提示，SheetJS 在低端设备上处理大表有明显延迟
服务端导出更适合生产环境
前端导出本质是“伪造 Excel 格式”，依赖浏览器行为和用户本地 Excel 版本，无法保证一致性。比如：IE 不支持 Blob、Mac 上 Numbers 打开乱码、财务系统要求带签名或加密 —— 这些都得靠服务端生成真实 .xlsx 文件。
立即学习“前端免费学习笔记（深入）”；
- 典型流程：前端发 POST 请求携带表格数据（JSON），后端用
python openpyxl/node-xlsx/Apache POI生成文件，返回Content-Disposition: attachment; filename="xxx.xlsx" - 关键点：不要传整个 HTML 字符串给后端解析 —— 容易 XSS，且结构难还原；应提取
thead列名 +tbody数据为二维数组再传 - 若必须前端主导，至少加一层校验：导出前检查
document.querySelectorAll("table tbody tr").length是否为 0，避免空表下载
真正麻烦的不是“怎么导出”，而是“导出后 Excel 打不开”或“数字变成文本”——这些往往源于 HTML 结构松散、编码没对齐、或用了前端库默认忽略格式的快捷方法。动手前先打开开发者工具，右键表格 → “Edit as HTML”，确认源码干净再写导出逻辑。
