layui动态表格导出复杂表头

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

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

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

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

function initHeader(){
    var header1 = []
       ,header2 = [];
    //第一行标题   
    header1.push({title:'序号',type:'numbers',rowspan:2})
    header1.push({field:'DisName',title:'渠道名称',minWidth:150,rowspan:2,totalRowText:'合计'});
    header1.push({title:'支出',colspan:2});
    header1.push({title:'收入',colspan:2});
    header1.push({field:'RemainMoney',title:'金额',minWidth:90,rowspan:2});
    //第二行标题
    header2.push({field:'CustomerName',title:'终端名称',minWidth:180});
    header2.push({field:'SettleMoney',title:'结算金额',minWidth:70,totalRow:true});
    header2.push({field:'PaymentName',title:'回款类型',minWidth:60});
    header2.push({field:'ReceivedMoney',title:'回款金额',minWidth:70,totalRow:true});
    
    header.push(header1);
    header.push(header2);

}

第二（初始化表格）：

$.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
                    }
                }
            });
  })