前端使用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显示样式
三、全部代码：
<html>
<head><script src="dist/xlsx.bundle.js"></script><style type="text/css">.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;}</style><scriptsrc="https://code.jquery.com/jquery-3.7.1.min.js"integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="crossorigin="anonymous"></script>
<!-- 如果这个jquery连接不上，可以自己下载一个--><head>
<body>
<table id="TableToExport" class="tbexport"><tr><td>序号</td><td>名称</td><td>测试1</td><td>测试2</td><td>测试3</td><td>测试4</td></tr><tr><td>1</td><td>bb</td><td>345</td><td>566</td><td>777</td><td>888</td></tr><tr><td>2</td><td>bb</td><td rowspan="3">999</td><td>566</td><td>777</td><td>888</td></tr><tr><td>3</td><td>bb</td><td>999</td><td>1010</td><td>111</td></tr><tr><td>4</td><td>bb</td><td>333</td><td>44</td><td>55</td></tr><tr><td colSpan="2">合计</td><td>22</td><td>77</td><td>88</td><td>99</td></tr>
</table><style type="text/css">.datatable{}.datatable td{padding:10px;border:1px solid #000}.datatable thead td {background-color:#f0f0f0}
</style><button id="sheetjsexport" onclick = "myExportExcel()"><b>合并单元格导出带边框</b></button><button onclick = "myExportExcel2()"><b>导出带表头表格</b></button>
<script>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<=maxRow; i++){for(let j = 0;j<=maxCol; j++){if (ws[XLSX.utils.encode_cell({r: i, c: j})] == undefined) {ws[XLSX.utils.encode_cell({r: i, c: j})] ={t: 's', v: "", z: XLSX.utils.encode_cell({r: i, c: j})};}}}return ws;
}function myExportExcel()
{/* Create worksheet from HTML DOM TABLE */var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"),{sheet:'测试',raw:true})/* Export to file (start a download) */var ws = wb.Sheets["测试"]; // get the currentconst range = XLSX.utils.decode_range(ws['!ref']);
// // 计算最大列号const maxCol = range.e.c; // 'e' 代表结束列，'c' 是列号的字段const maxRow = range.e.r;let arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M","N","O","P"] //总共多少列//设置公共样式ws = checkEmptyItem(ws);for (let i = 1; i <= maxRow+1; i++) {for(j = 0;j<=maxCol; j++){var item = arr[j];let str = item + i;if (ws[str]) {var cellStyle = { };cellStyle = $.extend(cellStyle, MyStyle.borderStyle) ;cellStyle = $.extend(cellStyle, MyStyle.centerStyle) ;if(i==1){cellStyle = $.extend(cellStyle, MyStyle.title2Style) ;ws['!cols'][j]={wpx:120};//设置列的高度}}Object.assign(ws[str], {s: cellStyle});}ws['!rows'][i-1] = { hpx:30 };//设置行的高度}XLSX.writeFile(wb, "SheetJSTable.xlsx");
}
//导出带表头样式
function myExportExcel2() {/* Create worksheet from HTML DOM TABLE */var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"), {sheet: '测试',raw: true,origin: {c: 0, r: 1}}); //从第1列，第三行开始var ws = wb.Sheets["测试"]; // get the current// 要插入的新行数据const newRow = ['测试完成情况'];
//添加1行合并单元格内容var nMergeLength = ws["!merges"].length;ws["!merges"][nMergeLength] = XLSX.utils.decode_range("A1:F1");
// 表头设置值ws[XLSX.utils.encode_cell({r: 0, c: 0})] ={t: 's', v: newRow[0], z: XLSX.utils.encode_cell({r: 0, c: 0})};
//设置表头样式Object.assign(ws["A1"], {s: MyStyle.titleStyle});ws['!rows'][0] = {hpx: 50};const range = XLSX.utils.decode_range(ws['!ref']);
// // 计算最大列号const maxCol = range.e.c; // 'e' 代表结束列，'c' 是列号的字段const maxRow = range.e.r;let arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P"] //总共多少列ws = checkEmptyItem(ws);//设置公共样式for (let i = 2; i <= maxRow + 1; i++) {for (j = 0; j <= maxCol; j++) {var item = arr[j];let str = item + i;if (ws[str]) {var cellStyle = {};cellStyle = $.extend(cellStyle, MyStyle.borderStyle);cellStyle = $.extend(cellStyle, MyStyle.centerStyle);if (i == 2) {cellStyle = $.extend(cellStyle, MyStyle.title2Style, MyStyle.bgStyle);ws['!cols'][j] = {wpx: 120};//设置列的高度}}Object.assign(ws[str], {s: cellStyle});}ws['!rows'][i - 1] = {hpx: 30};//设置行的高度}XLSX.writeFile(wb, "SheetJSTable.xlsx");
}
</script>
===================================================</body></html>
四、关键代码说明：
4.1. 这里主要是为了合并单元格时，给空单元格设置一个空值，不然加边框时就不会显示
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<=maxRow; i++){for(let j = 0;j<=maxCol; j++){if (ws[XLSX.utils.encode_cell({r: i, c: j})] == undefined) {ws[XLSX.utils.encode_cell({r: i, c: j})] ={t: 's', v: "", z: XLSX.utils.encode_cell({r: i, c: j})};}}}return ws;
}4.2 如果需要插入表头：
a) 加这句的意思是从第1行，第0列开始导出表格，意思就是给表头预留一行：
var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"), {
sheet: '测试',raw: true, origin: {c: 0, r: 1} });
b) 给表头设置值和加入样式：
//添加1行合并单元格内容
var nMergeLength = ws["!merges"].length;ws["!merges"][nMergeLength] = XLSX.utils.decode_range("A1:F1");// 表头设置值
ws[XLSX.utils.encode_cell({r: 0, c: 0})] ={t: 's', v: newRow[0], z: XLSX.utils.encode_cell({r: 0, c: 0})};
//设置表头样式
Object.assign(ws["A1"], {s: MyStyle.titleStyle});ws['!rows'][0] = {hpx: 50};