Layui的table.export()不支持导出复杂HTML样式，因其底层采用CSV/简易Excel逻辑，仅处理纯文本；需改用table2excel.js（读取DOM结构保留内联样式）或xlsx.js（手动映射样式）实现。
layui.table.export() 无法导出复杂样式 HTML 内容
直接调用 table.export() 导出时，所有单元格内容会被当作纯文本处理：<span class="layui-badge">已审核</span> 变成“已审核”，<img src="..."> 消失， style="max-width:90%" 全部失效。这不是 bug，是设计使然——该方法底层走的是 csv 或简易 excel 生成逻辑，不解析 dom 结构。
真实业务中需要导出的“样式”，通常指以下几类：
- 带颜色/背景色的 badge、tag 类元素
- 图标（
<i class="layui-icon"></i>）或 avatar 图片 - 条件渲染的 HTML 片段（如状态红绿灯、进度条
<div class="layui-progress">...</div>） - 内联样式或 class 控制的字体大小、对齐、换行等
用 table2excel.js 导出含样式 HTML 的表格
table2excel.js 是目前最轻量、兼容性最好（IE10+）、且能原样保留 colspan/rowspan 和内联样式的方案。它不依赖 layui 实例，只读取目标 <table> 的 DOM 结构并转为 Excel。
<p>实操要点：</p>
<ul>
<li>确保你要导出的表格是**静态 HTML 构建的**（即没走 <code>table.render()），或在导出前先用 layui.table.cache 拼出完整 HTML 表格再插入临时容器
table2excel.js 后，直接 new 实例：const t2e = new Table2Excel(); t2e.export(document.getElementById('myTable'), 'report');
style 属性和部分 class（如 layui-badge-success 对应的 background-color）映射为 Excel 单元格样式，但不支持 CSS 伪类、flex 布局、transform 等<input>、<select></select> 等表单控件，需提前用其 value 替换 innerHTML，否则导出为空导出前手动清理/转换 HTML 内容
很多“样式”其实是语义化需求，比如红字表示异常、图标表示类型。与其强求 Excel 渲染 HTML，不如在导出前做一层语义映射：
- 将
<span class="text-danger">逾期</span>→ 替换为纯文本“逾期”，再通过 Excel 样式规则（如条件格式）着色（适用于后端导出或 xlsx.js） - 将
<i class="layui-icon"></i>→ 替换为 Unicode 字符 ✅ 或文字“通过” - 对含
colspan/rowspan的表头，必须确保导出源表格是手写 DOM，table.render()动态生成的表格里这些属性会被忽略 - 如果用了
laytpl渲染单元格，导出前需先执行laytpl(tpl).render(data)得到最终 HTML 字符串，再塞进临时<table> <h3>用 xlsx.js + 自定义 sheet 处理样式边界</h3> <p>当必须控制字体、边框、列宽、甚至单元格合并时，<code>xlsx.js是更可控的选择，但它不自动识别 HTML 样式，需要你手动提取：- 遍历表格行，用
cell.style.color、cell.getAttribute('class')判断语义，再映射为{ font: { color: { rgb: "FF0000" } } }这类配置 -
colspan和rowspan需转为ws['!merges'] = [{s: {r:0,c:0}, e: {r:2,c:0}}]格式 - 避免直接用
XLSX.utils.table_to_sheet()—— 它会丢弃所有样式，必须用js_to_sheet()+ 手动设置ws[cellRef].s（cell style） - 中文导出乱码？确保
writeFile()时传入{ type: 'binary', bookType: 'xlsx' }，不要用type: 'array'或漏掉bookType
真正麻烦的不是“怎么导出”，而是“哪些样式值得导出”。Excel 本质是二维数据容器，强行塞进前端 UI 细节，后期维护和用户预期都会错位。优先用语义字段替代视觉样式，导出才不容易翻车。
- 遍历表格行，用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
