Spring+Bootstrap项目中导出带边框的HTML表格至Excel求助

我正在开发一个Spring后端+Bootstrap前端的项目，需要把页面上的HTML表格导出为带有边框的Excel文件。用了网上的JS导出代码（如下），但导出的Excel没有边框，求解决方法。

现有代码 #

HTML #

<div class="generateExcelFile">
    <button onclick="exportTableToExcel('transactionsTable', 'SettlementTransactions')" class="btn btn-primary">
        <i class="fa fa-download"></i> Export Transaction History
    </button>
</div>

JavaScript #

function exportTableToExcel(transactionsTable, filename = ''){
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(transactionsTable);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
    
    filename = filename?filename+'.xls':'excel_data.xls';
    
    downloadLink = document.createElement("a");
    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
        downloadLink.download = filename;
        downloadLink.click();
    }
}

问题原因 #

现有代码直接导出表格的outerHTML，但Bootstrap的表格边框是通过.table-bordered这类CSS类实现的，Excel解析HTML时不会加载外部CSS样式表，因此无法识别类中的边框规则，导致导出后边框丢失。

解决方案 #

方案一：给表格添加内联样式（快速修复） #

修改JS代码，在导出前给表格、单元格注入内联边框样式，让Excel能直接识别：

function exportTableToExcel(transactionsTable, filename = ''){
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(transactionsTable);
    
    // 给表格、表头、单元格添加内联边框样式
    var tableHTML = tableSelect.outerHTML
        .replace(/<table/g, '<table style="border-collapse: collapse;"')
        .replace(/<td/g, '<td style="border: 1px solid #000; padding: 8px;"')
        .replace(/<th/g, '<th style="border: 1px solid #000; padding: 8px; background-color: #f5f5f5;"')
        .replace(/ /g, '%20');
    
    filename = filename ? filename + '.xls' : 'excel_data.xls';
    
    downloadLink = document.createElement("a");
    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob(blob, filename);
    }else{
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
        downloadLink.download = filename;
        downloadLink.click();
    }
    document.body.removeChild(downloadLink); // 清理临时元素
}

方案二：使用SheetJS库（专业可靠） #

如果需要更复杂的样式控制（比如表头背景色、单元格对齐等），推荐使用SheetJS库，它能生成标准的Excel文件并支持样式定制：

1. 引入SheetJS库：

<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

2. 替换导出函数：

function exportTableToExcel(transactionsTable, filename = ''){
    const table = document.getElementById(transactionsTable);
    // 将表格转换为工作簿
    const wb = XLSX.utils.table_to_book(table, {sheet: "Transactions"});
    const ws = wb.Sheets["Transactions"];
    
    // 遍历所有单元格，添加边框样式
    const range = XLSX.utils.decode_range(ws['!ref']);
    for(let R = range.s.r; R <= range.e.r; ++R) {
        for(let C = range.s.c; C <= range.e.c; ++C) {
            const cellAddress = XLSX.utils.encode_cell({r:R,c:C});
            if(!ws[cellAddress]) continue;
            // 设置边框、对齐、字体样式
            ws[cellAddress].s = {
                border: {
                    top: {style:'thin'},
                    bottom: {style:'thin'},
                    left: {style:'thin'},
                    right: {style:'thin'}
                },
                alignment: {vertical:'center', horizontal:'left'},
                font: {name:'Arial', sz:12}
            };
        }
    }
    
    // 导出文件
    XLSX.writeFile(wb, `${filename || 'excel_data'}.xlsx`);
}

方案对比 #

• 方案一：无需引入额外库，代码改动小，适合简单需求；但样式控制有限，仅支持内联CSS能实现的效果。
• 方案二：支持复杂样式和格式，导出标准xlsx文件，兼容性更好；需要引入第三方库，但功能更强大。

内容的提问来源于stack exchange，提问作者WreckitJeck