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

 

@