HTML导出本质是生成静态HTML文件而非Excel，因缺少.xlsx结构、MIME类型声明及序列化过程，导致Excel打开时格式错乱、公式丢失；可靠方案需服务端用openpyxl等库生成或前端用xlsx库构造二进制流。
HTML导出本质是生成静态页面，不是Excel文件
很多人点“导出Excel”按钮后发现下载的是 .html 文件，双击用浏览器打开——这根本不是 Excel 能直接识别的 .xlsx 或 .xls。它只是把表格 HTML 代码原样保存成文件，靠 Excel 自己的 HTML 解析器勉强渲染，格式错乱、公式丢失、样式失效都是常态。
关键区别在于：HTML 导出不经过 Excel 格式序列化，不写入 xl/worksheets/sheet1.xml 这类结构，也不包含任何 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet MIME 类型声明。
- Excel 打开 HTML 文件时属于“兼容模式”，会丢弃
<style></style>、colspan/rowspan可能错位 - 服务器返回的
Content-Type通常是text/html或application/octet-stream，而非正确的 Excel MIME 类型 - 前端用
download属性强制保存为.xlsx后缀，但文件内容仍是 HTML，Excel 打开时会报“文件格式与扩展名不匹配”
真正 Excel 下载必须走服务端生成或前端专用库
要得到可信赖的 Excel 文件，只有两条路：服务端用 openpyxl（Python）、Apache POI（Java）等生成真实 .xlsx；或前端用 xlsx（SheetJS）这类库在浏览器内构造二进制流。
用 xlsx 库时，核心是调用 XLSX.write() 并指定 type: 'array' 或 'binary'，再用 new Blob() 包装，否则容易导出损坏文件：
立即学习“前端免费学习笔记（深入）”；
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet([['A1', 'B1'], ['A2', 'B2']]);
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
const wbout = XLSX.write(wb, { type: 'array', bookType: 'xlsx' });
const blob = new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
- 别用
type: 'string'，会导致中文乱码 -
bookType必须显式设为'xlsx'，否则默认可能是'csv' - 服务端生成更稳妥，尤其涉及合并单元格、条件格式、图表等复杂需求
HTML导出被误当Excel下载，90%是因为响应头和文件后缀没对齐
典型错误链：fetch('/export') 返回 HTML 字符串 → 前端用 URL.createObjectURL(new Blob([res.text], ...)) → 设置 download="data.xlsx"。表面看是 Excel，实际点开全是 <table> 标签。
- 检查响应头：
Content-Type是text/html就别指望 Excel 正常解析 - 浏览器开发者工具 Network 面板里点开响应，按
Ctrl+U查看源码，开头是<!DOCTYPE html>就坐实是 HTML - 后缀欺骗无效：把
report.html改名成report.xlsx不改变文件本质，Excel 会静默降级处理
混合场景下最容易踩坑：用 HTML 渲染页直接“另存为”
有些系统让用户在浏览器里右键 → “另存为”，保存当前 HTML 页面。这种方式完全绕过所有后端逻辑，保存的是带 JS 渲染结果的快照，但：
- 动态加载的数据（如分页表格第二页）不会被保存
- Vue/React 绑定的
v-model或value状态可能未同步到 DOM，导出空值 - 隐藏列（
display: none）仍可能被 Excel 解析出来，因为 HTML 结构还在 - CSS Grid / Flex 布局的表格会被 Excel 当作碎片内容，列顺序全乱
真要支持“所见即所得”导出，得用 html2canvas 截图转 PNG，或用 jsPDF + html2canvas 生成 PDF——但那就彻底不是 Excel 了。
