使用Sheet JS导出Excel时列标题格式不生效的解决求助

可以通过SheetJS（即你使用的xlsx库）为导出的Excel表格设置表头背景色和文字颜色，你的代码未生效是因为导出配置未启用样式支持，以下是修正方案：

问题根源 #

你已尝试通过ws[cellRef].s定义单元格样式，但默认情况下XLSX.write不会导出样式，需调整导出参数并确保样式格式符合库的要求。

修正后的完整代码 #

HTML部分 #

<!doctype html>
<html>
<head>
<title>导出带格式表头的Excel</title>
<meta name="description" content="导出HTML表格到Excel并设置表头样式">
<meta name="keywords" content="html, excel, sheetjs">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.0/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
<h4>导出HTML表格到Excel（带表头样式）</h4>
<button onclick="exportToExcel()">Export to Excel</button>
<div id="report_expor_table_data_se">
    <table style="border-bottom: 1px solid #dddee2" id="rep_groupingTable_data" width="100%" cellpadding="0" cellspacing="0" class="report_grouping_table">
        <thead>
            <tr>
                <th style="text-align: left;background: #36a7c4;border-bottom: 1px solid #dddee2;">Status</th>
                <th style="text-align: left;background: #36a7c4;border-bottom: 1px solid #dddee2;">Code</th>
                <th style="text-align: left;background: #36a7c4;border-bottom: 1px solid #dddee2;">Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="text-align: left; padding: 10px 10px;font-size: 14px;color: #4f5764;line-height: 1.5em;border-top: 1px solid #dddee2;border-left: 1px solid #dddee2;">active</td>
                <td style="text-align: left; padding: 10px 10px;font-size: 14px;color: #4f5764;line-height: 1.5em;border-top: 1px solid #dddee2;border-left: 1px solid #dddee2;">CUS001</td>
                <td style="text-align: left; padding: 10px 10px;font-size: 14px;color: #4f5764;line-height: 1.5em;border-top: 1px solid #dddee2;border-left: 1px solid #dddee2;">Demo Customer</td>
            </tr>
            <tr>
                <td style="text-align: left; padding: 10px 10px;font-size: 14px;color: #4f5764;line-height: 1.5em;border-top: 1px solid #dddee2;border-left: 1px solid #dddee2;">inactive</td>
                <td style="text-align: left; padding: 10px 10px;font-size: 14px;color: #4f5764;line-height: 1.5em;border-top: 1px solid #dddee2;border-left: 1px solid #dddee2;">00009</td>
                <td style="text-align: left; padding: 10px 10px;font-size: 14px;color: #4f5764;line-height: 1.5em;border-top: 1px solid #dddee2;border-left: 1px solid #dddee2;">Jean</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

CSS部分 #

#report_expor_table_data_se {
    margin-top:20px;
}

JavaScript部分 #

function exportToExcel() {
    const table = document.getElementById('rep_groupingTable_data');
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.table_to_sheet(table, { raw: true });

    // 设置表头样式
    const headerCount = table.querySelectorAll('th').length;
    for (let index = 0; index < headerCount; index++) {
        const cellRef = XLSX.utils.encode_cell({ c: index, r: 0 });
        // 定义样式：背景色#0072C6，文字白色
        ws[cellRef].s = {
            fill: {
                fgColor: { rgb: '0072C6' } // SheetJS使用fgColor设置单元格背景色
            },
            font: {
                color: { rgb: 'FFFFFF' }
            },
            alignment: { vertical: 'center', horizontal: 'left' }
        };
    }

    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    // 导出配置：启用样式需设置bookSST为true，type改为array
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array', bookSST: true });
    saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'Report.xlsx');
}

// 辅助函数：字符串转ArrayBuffer（兼容原逻辑）
function s2ab(s) {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
}

// 保存文件函数
function saveAs(blob, filename) {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
}

关键修正点 #

1. 样式属性修正：SheetJS中单元格背景色使用fill.fgColor而非bgColor，这是样式不生效的核心原因之一。
2. 导出参数调整：在XLSX.write中添加bookSST: true并将type设为'array'，确保样式被正确导出。
3. 样式值格式：RGB值使用6位十六进制字符串（不带#或前缀FF），例如白色为'FFFFFF'，蓝色为'0072C6'。

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