layui导出表格二级表头控制导出的边框字体格子大小颜色

太过爱你忘了你带给我的痛 2021-10-01 06:56 1501阅读 0赞

需要引入拓展插件excel 市场拓展插件找得到

layui.config({ 
                base: '${pageContext.request.contextPath}/admin/' //静态资源所在路径
            }).extend({ 
                index: 'lib/index' //主入口模块
            }).use(['index', 'form', 'laydate', 'table', 'element', 'formSelects', 'excel', 'upload'], function () { 
                var $ = layui.$,
                    form = layui.form,
                    laydate = layui.laydate,
                    table = layui.table,
                    element = layui.element,
                    formSelects = layui.formSelects,
                    excel = layui.excel,
                    upload = layui.upload;
                    })
    
    
     //第一张表格对象
                tableObj = table.render({ 
                    elem: '#data_table',
                    title: '资源投入明细表',
                    cols: [
                        [{ field: 'branchlr',title: '编码',align: 'center',sort: true,rowspan: 3,width: 100,},
                        { field: 'name',title: '机构',align: 'center',rowspan: 3,width: 150,},
                        { title: '业务发展',align: 'center',colspan: 2,width: 100},
                        { align: 'center',title: '队伍建设',colspan: 2}, 
                        { align: 'center',title: '基础管理',colspan: 2}, 
                        { align: 'center',title: '运营费用',colspan: 2,totalRow:true},
                        { align: 'center',title: '资产费用',colspan: 2,totalRow:true},
                        { align: 'center',title: '行政办公费用',colspan: 2,totalRow:true},
                        { align: 'center',title: '其他',colspan: 2},
                        { align: 'center',title: '合计',colspan: 2}],
                        [{ field: 'VAL01',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                        { field: 'ProVAL01',title: '占比',align: 'center',sort: true,width: 100}, 
                        { field: 'VAL02',title: '金额',align: 'center',sort: true,width: 100,totalRow:true}, 
                        { field: 'ProVAL02',title: '占比',align: 'center',sort: true,width: 100},
                        { field: 'VAL03',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                        { field: 'ProVAL03',title: '占比',align: 'center',sort: true,width: 100}, 
                        { field: 'VAL04',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                        { field: 'ProVAL04',title: '占比',align: 'center',sort: true,width: 100},
                        { field: 'VAL05',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                        { field: 'ProVAL05',title: '占比',align: 'center',sort: true,width: 100},
                        { field: 'VAL06',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                        { field: 'ProVAL06',title: '占比',align: 'center',sort: true,width: 100},
                        { field: 'VAL07',title: '金额',align: 'center',sort: true,width: 100,totalRow:true},
                        { field: 'ProVAL07',title: '占比',align: 'center',sort: true,width: 100},
                        { field: 'TotalVAL',title: '金额',align: 'center',sort: true,width: 100,totalRow:true}, 
                        { field: 'ProTotalVAL',title: '占比',align: 'center',sort: true,width: 100}]
                    ],
                    toolbar: '#toolbar', //toolbar: '#toolbar' //指向自定义工具栏模板选择器
                    cellMinWidth: 100,
                    defaultToolbar: ['exports'], //自由配置头部工具栏右侧的图标
                    totalRow: false, //是否开启合计行区域
                    page: true, //开启分页（默认：false）
                    limit: 50, //每页显示的条数（默认：10）。值务必对应 limits 参数的选项。
                    limits: [50, 100, 200, 1000], //每页条数的选择项
                    skin: 'row',
                    data: [],
                    even: true //true/false 若不开启隔行背景，不设置该参数即可
                });
    
    
    
                // 第一张表格对象头工具栏事件
                table.on('toolbar(data_table)', function (obj) { 
                    switch (obj.event) { 
                        case 'searchData_evn':   // 查询数据
                            searchData_fun("0");
                            break;
                        case 'exportsData_evn':   // 导出数据
                            exportsData_fun("0");
                            break;
                    };
                });

// 导出表格函数 第一张表 
                function exportsData_fun() { 
                    var tableDate=table.cache['data_table']
                    if (tableDate==null || tableDate.length==0){ 
                        layer.msg("当前无数据，不允许导出");
                        return;
                    }
                    // 报表名称
                    var fileName = '测试表'
                    // 模板 
                    var public_template={ 
                        'branchlr': '',
                        'name': '',
                        'v01': '','v02': '','v03': '','v04': '','v05': '','v06': '', 'v07': '','v08': '','v09': '','v10': '',
                        'v11': '','v12': '','v13': '','v14': '','v15': '','v16': ''
                    }
                    //Excel内容 多级表头第一表头
                    var firstLine=deepCopy(public_template)
                    firstLine["branchlr"]="编码"
                    firstLine["name"]="机构"
                    firstLine["v01"]="业务发展"
                    firstLine["v02"]="占比"
                    firstLine["v03"]="队伍建设"
                    firstLine["v04"]="占比"
                    firstLine["v05"]="基础管理"
                    firstLine["v06"]="占比"
                    firstLine["v07"]="运营费用"
                    firstLine["v08"]="占比"
                    firstLine["v09"]="资产费用"
                    firstLine["v10"]="占比"
                    firstLine["v11"]="行政办公费用"
                    firstLine["v12"]="占比"
                    firstLine["v13"]="其他"
                    firstLine["v14"]="占比"
                    firstLine["v15"]="合计"
                    firstLine["v16"]="占比"
                     //Excel内容 多级表头第二表头
                    var secondLine=deepCopy(public_template)
                    secondLine["branchlr"]="编码"
                    secondLine["name"]="机构"
                    secondLine["v01"]="金额"
                    secondLine["v02"]="占比"
                    secondLine["v03"]="金额"
                    secondLine["v04"]="占比"
                    secondLine["v05"]="金额"
                    secondLine["v06"]="占比"
                    secondLine["v07"]="金额"
                    secondLine["v08"]="占比"
                    secondLine["v09"]="金额"
                    secondLine["v10"]="占比"
                    secondLine["v11"]="金额"
                    secondLine["v12"]="占比"
                    secondLine["v13"]="金额"
                    secondLine["v14"]="占比"
                    secondLine["v15"]="金额"
                    secondLine["v16"]="占比"
                    var exportData = []  // 导出的数据
                    for (var i = 0; i < tableDate.length; i++) { 
                        var list = { 
                        	'branchlr': tableDate[i].branchlr,
                        	'name': tableDate[i].name,
                        	'v01': tableDate[i].VAL01,
                        	'v02': tableDate[i].ProVAL01,
                        	'v03': tableDate[i].VAL02,
                        	'v04': tableDate[i].ProVAL02,
                        	'v05': tableDate[i].VAL03,
                            'v06': tableDate[i].ProVAL03,
                        	'v07': tableDate[i].VAL04,
                        	'v08': tableDate[i].ProVAL04,
                        	'v09': tableDate[i].VAL05,
                        	'v10': tableDate[i].ProVAL05,
                            'v11': tableDate[i].VAL06,
                        	'v12': tableDate[i].ProVAL06,
                            'v13': tableDate[i].VAL07,
                        	'v14': tableDate[i].ProVAL07,
                        	'v15': tableDate[i].TotalVAL,
                        	'v16': tableDate[i].ProTotalVAL,
                        };
                        exportData.push(list);
                    }
                    exportData.unshift(firstLine,secondLine);
                     // 加边框范围
                     var round="A1:R" + exportData.length  
    
                    // 边框加粗
                    excel.setExportCellStyle(exportData,round,{ 
                        s:{ 
                            fill: {  patternType:"solid", bgColor: {  indexed: 64 }, fgColor: {  rgb: "FFFFFF" } },
                            border:{ 
                                top:{  style: "thin" },
                                bottom:{  style: "thin"},
                                left:{  style: "thin"},
                                right:{  style: "thin"}
                            }
                        }
                    })
    
                    // Excel内容 表头样式
                    excel.setExportCellStyle(exportData,'A1:R2',{ 
                        s:{ 
                            alignment: { 
                                horizontal: 'center',
                                vertical: 'center'
                            }
                        }
                    })
                    // 合并多级表头
                    var mergeConf = excel.makeMergeConfig([
                        ['A1', 'A2'],
                        ['B1', 'B2'],
                        ['C1', 'D1'],
                        ['E1', 'F1'],
                        ['G1', 'H1'],
                        ['I1', 'J1'],
                        ['K1', 'L1'],
                        ['M1', 'N1'],
                        ['O1', 'P1'],
                        ['Q1', 'R1']
                    ]);
    
                    // 列单元格撑大
                    var colConf = excel.makeColConfig({ 
                        'B':100
                    }, 80);
    
                    excel.exportExcel({ 
                        sheet1: exportData
                    }, fileName + '.xlsx', 'xlsx', { 
                        extend: { 
                            sheet1: { 
                                '!merges': mergeConf,
                                '!cols': colConf
                            }
                        }
                    });
                }

效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]: /images/20210724/265a6c50a36b4c38a7b4159c105bd91b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]: /images/20210724/d0c9ef87cc7142c1a52d6466bb0d356c.png