layui table.exportfile() 默认不导出合计行,因其仅读取 table.cache 数据,而合计行由 totalrow 渲染在 dom 中且未写入 cache;需手动拼接当前页数据与 dom 中提取的合计行文本后导出。
layui table.exportfile() 默认不包含合计行,因为合计行是前端动态渲染的,不在 table.cache 数据中;想导出时带上合计行,必须手动拼接数据——不是改配置,而是接管导出逻辑。
为什么 table.exportFile() 导不出合计行
合计行由 totalRow: true 触发,在 DOM 中插入到 .layui-table-total 里,但它的值不写入 table.cache,也不参与 exportFile 的默认数据源。调用 table.exportFile(id) 实际读的是 table.cache[id],自然漏掉合计行。
- 查源码可见:
exportFile内部只取data || table.cache[id] || [],没读that.totalRowData或 DOM 中的合计单元格文本 - 即使你开了
totalRow: true,导出 CSV/XLS 文件里依然只有原始数据行 - 如果合计行用了
totalRowText: '小计:',这个前缀也仅作用于界面,不会自动注入导出数据
手动拼接合计行到导出数据(推荐)
最稳的方式:在点击导出时,从表格实例拿到当前页数据 + 合计行内容,合成二维数组再传给 table.exportFile()。
- 先确保表格启用了合计:
totalRow: true,且对应列设了totalRow: true - 用
table.clearCacheKey(table.cache[tableName])拿当前页数据(避免分页影响) - 合计行内容需从 DOM 读取(因为
that.totalRowData在新版 Layui 中未公开暴露):$('.layui-table-total td').map((i, el) => $(el).text().trim()).get() - 注意表头和合计行字段顺序要严格对齐,否则列错位;建议用
table.config.cols[0].map(c => c.title)提取表头 - 示例片段:
layui.use('table', function(){
var table = layui.table;
table.on('toolbar(test)', function(obj){
if(obj.event === 'export'){
var ins = table.getIns('test');
var data = table.clearCacheKey(ins.cache.data); // 当前页数据
var headers = ins.config.cols[0].map(c => c.title);
var totalCells = $('.layui-table-total td').map((i, el) => $(el).text().trim()).get();
// 拼接:表头 + 数据 + 合计行
var exportData = [headers].concat(data.map(row =>
ins.config.cols[0].map(col => row[col.field] || '')
), [totalCells]);
table.exportFile('test', exportData, 'csv');
}
});
});
用 SheetJS 导出带样式的 Excel(含合计行)
如果需要真实 .xlsx、保留数字格式或加粗合计行,table.exportFile() 不够用,得上 xlsx.full.min.js。
- 不能直接传
table.cache给XLSX.utils.aoa_to_sheet(),要先提取表头、数据、合计行三段 - 合计行文本可能含前缀(如“合计:”),需提前清理或保留——它只是字符串,SheetJS 不做计算
- 日期/金额列若导出后变科学计数法,要在写入前转成
Number或Date类型 - 合计行建议放在最后一行,用
ws['A'+(rows.length+2)] = {v: '合计:', bold: true}单独设样式(SheetJS 支持)
容易被忽略的关键点
合计行导出看着简单,实际踩坑集中在三处:一是分页状态下只导出当前页数据,但合计行却按全量计算(或反之),导致数值对不上;二是 DOM 中的合计单元格可能含换行符、空格或 ,直接 .text() 会污染 CSV;三是多人协作时,有人改了列宽或隐藏列,但导出逻辑没同步更新列顺序,结果合计行字段错位。











