Layui的table.exportFile()不支持表头合并,必须用SheetJS手动构建含!merges的Excel;需通过table.cache获取数据、二维数组定义多级表头,并精确计算行列索引(r/c从0开始),导出时指定bookType: 'xlsx'和正确MIME类型。
table.exportFile() 根本不处理表头合并逻辑
直接调用 table.exportfile() 导出的 excel(实际是 csv 冒充)会完全丢弃 colspan 和 rowspan 信息——这不是配置遗漏,是 layui 1.x / 2.x 的导出模块压根没解析 dom 表头结构。你看到渲染页上有合并效果,导出时已断开映射。传进去的数据再复杂,它也只按扁平二维数组原样写入,!merges、样式、格式全无支持。
必须用 SheetJS 手动构造含 !merges 的 sheet
真正能合并单元格的唯一路径:放弃 table.exportFile(),改用 XLSX.utils.aoa_to_sheet() 构建工作表,并手动填充 ws['!merges'] 数组。
- 先从
table.cache['your-table-id']拿原始数据(注意:分页后只含当前页,如需全量得另配接口) - 用二维数组定义多级表头,例如
[['基本信息', null, '成绩'], ['姓名', '年龄', '语文', '数学', '英语']],但数组本身不触发合并,只是占位参考 - 精确计算每块合并区域的起止行列:
{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } }表示第 0 行第 0 列到第 0 行第 1 列(即跨两列),r和c从 0 开始计数 - 表头行(第 0 行)不能参与数据列合并;若某列
hide: true,它不占数据列位置,但表头数组里要留null或跳过,否则行列索引错位
合并区域必须严格连续、无重叠
ws['!merges'] 是个对象数组,每个对象描述一个矩形合并区。Excel 解析器对这个结构极其敏感:
- 两个合并区不能交叉或重叠,否则打开报错或显示异常
- 起始行
s.r和结束行e.r必须满足s.r ≤ e.r,列同理;e是包含端点的,不是长度 - 如果表格有表头(比如 2 行),所有数据行合并的
r值要从 2 开始算(即s.r = 2),别把表头卷进去 - 常见错误:用 DOM 中的
th.rowSpan直接转成!merges—— 渲染后的 DOM 索引和 SheetJS 的二维数组索引不一致,必须重新按数据结构推算
中文乱码和文件类型别搞混
导出中文显示为方块或提示“文件损坏”,大概率不是编码问题,而是 MIME 类型和文件后缀不匹配:
- 用
XLSX.write(wb, { type: 'array', bookType: 'xlsx' })得到Uint8Array - 必须用
new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })包裹,不能写成text/csv或application/octet-stream - 后缀名必须是
.xlsx,且bookType: 'xlsx'要显式指定,'xls'不支持!merges











