layui 学习笔记(四) 复杂表头前台Excel导出

layui - excel 复杂表头导出- 第三方插件实现

参考：https://fly.layui.com/extend/excel/
演示：http://excel.wj2015.com/

　　　http://excel.wj2015.com/_book/docs/%E5%87%BD%E6%95%B0%E5%88%97%E8%A1%A8/%E5%AF%BC%E5%87%BA%E7%9B%B8%E5%85%B3%E5%87%BD%E6%95%B0.html
　　

开始：

　　码云地址下载插件：https://gitee.com/wangerzi/layui-excel
　　并引入excel.js或excel.min.js 可以参考index.js里写的复杂表头

table.render({
        elem: '#demo',
        url: 接口url,//数据接口
        title: 'test',
        limit: 10,
        cols: [[
             {field: 'name', title:'姓名', rowspan: 2,width:100}
            ,{field: 'age', title: '年龄', rowspan: 2,width:100}
            ,{align: 'center',field: 'cs1',title: '测试合并1', colspan: 2} 
            ,{align: 'center',field: 'cs2',title: '测试合并2', colspan: 2}
        ],[
            {align: 'center', field: 'a1',title: '合并1'} 
            ,{align: 'center',field: 'a2', title: '合并2'}
            ,{align: 'center',field: 'a3', title: '合并3'}
            ,{align: 'center',field: 'a4', title: '合并4'}
        ]],
        done: function (res, curr, count) {
            var exportData = res.data;
            exportMe(exportData);
        }
 });
 
 
 function exportMe(data){
        // 把表头放到data里
        data.unshift({a1:'1',a2:'2',a3:'3',a4:'4'});
        data.unshift({name:'姓名',age:'年龄',a1:'测试合并1',a2:'',a3:'测试合并2',a4:''}); 
        // 配置合并单元格
        var mergeConf = LAY_EXCEL.makeMergeConfig([
            ['C1', 'D1'],
            ['E1', 'F1'],
            ['A1', 'A2'],
            ['B1', 'B2']
        ])
        // 2. 配置 列宽 C列宽 150，E列宽150，默认80
        var colConf = LAY_EXCEL.makeColConfig({
            'C': 150,
            'E': 150,
        }, 80)
        // 3. 第1行行高40，第二行行高30，默认20
        var rowConf = LAY_EXCEL.makeRowConfig({
            1: 40,
            3: 30
        }, 20)
        LAY_EXCEL.exportExcel({
            sheet1: data
        }, '测试导出复杂表头.xlsx', 'xlsx', {
            extend: {
                // extend 中可以指定某个 sheet 的属性，如果不指定 sheet 则所有 sheet 套用同一套属性
                sheet1: {
                    '!merges': mergeConf
                    , '!cols': colConf
                    , '!rows': rowConf
                }
            }
        });
    }

 

@