Layui table.exportFile() 不支持表尾导出,需手动将表尾数据拼接到导出数组末尾;若需样式或合并单元格,则必须使用 SheetJS 自定义构建 Excel 文件。
layui table.exportfile() 原生不支持表尾(footer)导出——它只处理 thead 和 tbody,压根没读取 tfoot 或任何“底部汇总行”逻辑。
为什么直接写 tfoot 标签导出后消失
你可能在表格 HTML 里写了 <tfoot><tr><td colspan="3">合计:¥123,456.00</td></tr></tfoot>,但 table.exportFile() 内部只遍历 table.cache 数据 + cols 配置,完全忽略 DOM 中的 tfoot 结构。渲染时它能显示,导出时它不存在。
- 所有尝试给
exportFile()参数加footer、summary字段都无效——这些字段不在 Layui API 文档里,也不被解析 - 即使你用 jQuery 抓到
$('tfoot td').text(),也得自己算好位置塞进数据末尾,不能靠“自动识别”
手动追加表尾行到导出数据数组
核心是把表尾内容当成普通数据行,拼到底部。前提是:你清楚表尾要填在哪几列、占几列、内容是什么。
- 先确认你要导出的列顺序和数量,比如
['name', 'score', 'rank']→ 表头 3 列 → 表尾也必须是长度为 3 的数组 - 横向合并需求(如
colspan="3")不能靠 DOM,得靠 SheetJS 手动!merges——但这是另一层复杂度,先确保基础追加能跑通 - 示例:导出 3 列数据,表尾要跨全列写“总计”,可这样构造数据:
const data = layui.table.cache['myTable'] || [];
const footerRow = ['总计', '', '']; // 占位,或 ['总计', '¥123,456.00', '']
const exportData = [...data, footerRow]; // 注意:必须是二维数组,每行是数组
layui.table.exportFile('myTable', exportData, { headers: ['姓名', '分数', '排名'] });
- 如果表尾需右对齐、加粗、背景色等样式,
exportFile()不支持 —— 必须换 SheetJS 手动构建 Workbook
需要带格式的表尾?绕开 exportFile(),用 SheetJS 构建完整工作表
一旦涉及合并单元格、字体、边框、颜色,就超出 Layui 导出能力边界。SheetJS 是唯一靠谱路径。
- 表尾行坐标按 Excel 0 起始索引计算:比如数据共 10 行(索引 0–9),表尾就是第 10 行(
r: 10) - 跨列合并写法:
{s: {r: 10, c: 0}, e: {r: 10, c: 2}}表示第 10 行、第 0–2 列合并(共 3 列) - 务必注意:
Blob的type必须是'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',后缀必须是.xlsx,否则 Excel 打不开 - 别漏掉 BOM 头(
\uFEFF)——中文表尾文字乱码,90% 出在这儿
真正麻烦的不是写一行“总计”,而是让这行在 Excel 里既居中跨列、又加粗、又带底纹。Layui 不管这些,你得自己扛。


















