Layui table如何实现在导出Excel时包含统计合计行

云婷吖_5912

云婷吖_5912

2026-06-30

142人浏览

原创

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()。

excel-clean
excel-clean

Excel 数据清洗——去重、填补缺失值、格式转换。

下载
  • 先确保表格启用了合计: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;三是多人协作时,有人改了列宽或隐藏列,但导出逻辑没同步更新列顺序,结果合计行字段错位。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui excel

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2560

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

340

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2393

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1141

6

excel对比两列数据异同
excel对比两列数据异同

Excel作为数据的小型载体,在日常工作中经常会遇到需要核对两列数据的情况,本专题为大家提供excel对比两列数据异同相关的文章,大家可以免费体验。

2023.07.25

4841

7

excel重复项筛选标色
excel重复项筛选标色

excel的重复项筛选标色功能使我们能够快速找到和处理数据中的重复值。本专题为大家提供excel重复项筛选标色的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.31

2956

5

excel复制表格怎么复制出来和原来一样大
excel复制表格怎么复制出来和原来一样大

本专题为大家带来excel复制表格怎么复制出来和原来一样大相关文章,帮助大家解决问题。

2023.08.02

2740

3

excel表格斜线一分为二
excel表格斜线一分为二

在Excel表格中,我们可以使用斜线将单元格一分为二。本专题为大家带来excel表格斜线一分为二怎么弄的相关文章,希望可以帮到大家。

2023.08.02

1444

3

excel斜线表头一分为二
excel斜线表头一分为二

excel斜线表头一分为二的方法有使用合并单元格功能方法、使用文本框功能方法、使用自定义格式方法。本专题为大家提供excel斜线表头一分为二相关的各种文章、以及下载和课程。

2023.08.02

697

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.7万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.9万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习