layui动态表格导出复杂表头

2023-07-20 20:44| 来源: 网络整理| 查看: 265

2021年1月19日第一次导出动态表格复杂表头有点懵逼，一直百度都不符合要求，知道找到一篇文章终于解决我的问题。这边有个简单的文档可以看下：http://excel.wj2015.com/

以下是我自己总结的解决办法(需下载excel.js文件)：

链接：https://pan.baidu.com/s/1VxjLtuphLTiAxUlNwYKnKA 提取码：gxqz 此为引用创建者： songyinan

第一（动态表格）：自定义表格（复杂表头）

第二（初始化表格）：

$.ajax({ type:"POST", url:访问的Url, contentType:"application/x-www-form-urlencoded;charset=utf-8", dataType:"json", data:{ //参数 }, async: true,//异步 success:function(res) { //成功后初始化表格 var result = res.data; exportData = result;//赋值给导出的数据 departTable.reload({ elem: '#departTable' ,cols: header ,data: result ,id:'departTable' ,page:true ,limit: 20//任何你限制的数量 ,totalRow:true }); } });

第三（导出）：

//设置导出字段 exportData = excel.filterExportData(exportData, { RowNumber: 'RowNumber' ,DisName: 'DisName' ,CustomerName: 'CustomerName' ... //需要导出的字段 }); //设置导出表头 exportData.unshift({ CustomerName: '终端名称' ,SettleMoney: '结算金额' ,PaymentName:'回款类型' ,ReceivedMoney:'回款金额' }) exportData.unshift({ RowNumber: '序号' ,DisName: '渠道名称' ,CustomerName: '支出' ,SettleMoney: '' ,PaymentName:'收入' ,ReceivedMoney:'' ,RemainMoney:'余额' }) //合并单元格 var mergeConf = excel.makeMergeConfig([ ['A1', 'A2'], ['B1', 'B2'], ['C1', 'C2'] ... ]) //设置样式 excel.setExportCellStyle(exportData, 'A1:I2', { //A1-I2是范围区间 s: { //设置居中 alignment: { horizontal: 'center', vertical: 'center' } } }, function(cell, newCell, row, config, currentRow, currentCol, fieldKey) { // 回调参数，cell:原有数据，newCell:根据批量设置规则自动生成的样式， //row:所在行数据，config:传入的配置,currentRow:当前行索引,currentCol:当前列索引，fieldKey:当前字段索引 return newCell ; } ); //设置导出文件单元格宽度 //可以避免因单元格数据长度过长，显示科学计数法 var colConf = excel.makeColConfig({ 'A': 30, 'B': 150, 'C': 100, 'D': 150, 'E':100, 'F':100 ... }, 60) excel.exportExcel({ sheet1: exportData }, excel标题+'.xlsx', 'xlsx',{ extend: { sheet1: { '!merges': mergeConf, '!cols': colConf } } }); })

【本文地址】

公司简介

联系我们