前端使用xlsx-js-style导出Excel，带样式，并处理合并单元格边框显示不全和动态插入表头解决

一、在学习之前，先给出一些学习/下载地址：

xlsx-js-style下载地址

https://github.com/gitbrent/xlsx-js-style

或者

https://www.npmjs.com/package/xlsx-js-style

SheetJS中文教程：

https://xlsx.nodejs.cn/docs/csf/cell

二、先看样式

页面HTML显示

2.1 导出带边框的表格Excel显示样式：

2.2 表格插入表头操作Excel显示样式

三、全部代码：

    
    
        .tbexport {
            border-collapse: collapse;
            width: 500px;
        }
        .tbexport th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .tbexport2 {
            border-collapse: collapse;
            width: 100%;
        }
        .tbexport2 th, td {
            border: 1px solid #ddd;
            text-align: left;
        }
    
    

    

序号	名称	测试1	测试2	测试3	测试4
1	bb	345	566	777	888
2	bb	999	566	777	888
3	bb	999	1010	111
4	bb	333	44	55
合计	22	77	88	99

.datatable{ } .datatable td{ padding:10px;border:1px solid #000 } .datatable thead td { background-color:#f0f0f0 } 合并单元格导出带边框 导出带表头表格 var MyStyle = { borderStyle:{ border: { top: { style: 'thin', color: { auto: 1 } }, left: { style: 'thin', color: { auto: 1 } }, right: { style: 'thin', color: { auto: 1 } }, bottom: { style: 'thin', color: { auto: 1 } } }, }, centerStyle: { alignment: { horizontal: "center", vertical: "center" } }, leftStyle :{ alignment: { horizontal: "left", vertical: "center" }, }, rightStyle : { alignment: { horizontal: "right", vertical: "center" }, }, boldStyle : { //设置一级标题样式 font: { // sz: 12, bold: true, // color: {rgb: "000000"} } }, smallStyle : { //设置一级标题样式 font: { sz: 9, bold: false, color: {rgb: "222222"} } }, titleStyle : { //设置一级标题样式 font: { sz: 14, bold: true, // color: {rgb: "000000"} }, alignment: { horizontal: "center", vertical: "center" }, }, title2Style : { //设置二级标题样式 font: { bold: true, // color: {rgb: "000000"} }, alignment: { horizontal: "center", vertical: "center" }, }, bgStyle : { fill:{ fgColor: {rgb: "EEECE1"} }, } }; function checkEmptyItem(ws ){ var range = XLSX.utils.decode_range(ws['!ref']); // // 计算最大列号 var maxCol = range.e.c; // 'e' 代表结束列，'c' 是列号的字段 var maxRow = range.e.r; //不加时，合并单元格边框会缺少 for(let i = 0; i