如何用JavaScript的ExcelJS为导出Excel的列标题添加样式（现有代码失效）

原SheetJS(XLSX)核心库不支持单元格样式，想要给导出的Excel表头添加样式，用ExcelJS可以轻松实现，以下是完整方案：

实现步骤 #

• 引入ExcelJS和FileSaver依赖
• 读取页面表格的表头和数据
• 为表头单元格设置指定样式
• 生成并下载Excel文件

完整代码 #

HTML部分（保留原有结构） #

<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 id="rep_grouping_header" style="text-align: left;background: #36a7c4;border-bottom: 1px solid #dddee2;"><tr><th style="white-space:nowrap;text-align: left;padding: 10px 10px;font-size: 14px;color: #fff;line-height: 1.5em;border-left: 1px solid #ffffff;"></th><th style="white-space:nowrap;text-align: left;padding: 10px 10px;font-size: 14px;color: #fff;line-height: 1.5em;border-left: 1px solid #ffffff;"></th><th style="white-space:nowrap;text-align: center;padding: 10px 10px;font-size: 14px;color: #fff;line-height: 1.5em;border-left: 1px solid #ffffff;" class="sorting_disabled" colspan="1">Health And Safety</th><th style="white-space:nowrap;text-align: center;padding: 10px 10px;font-size: 14px;color: #fff;line-height: 1.5em;border-left: 1px solid #ffffff;" class="sorting_disabled" colspan="2">Adherence To&nbsp; The Schedules Of Duties</th></tr></thead>
 <tbody id="rep_grouping_body">
<!-- 填充表格数据 -->
</tbody>
</table></div>
<button onclick="exportReportGroups()">导出Excel</button>

JavaScript部分 #

async function exportReportGroups() {
    // 获取页面表格元素
    const table = document.getElementById('rep_groupingTable_data');
    const headerRow = table.querySelector('thead tr');
    const bodyRows = table.querySelectorAll('tbody tr');

    // 创建ExcelJS工作簿和工作表
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Sheet1');

    // 定义表头样式
    const headerCellStyle = {
        fill: {
            type: 'pattern',
            pattern: 'solid',
            fgColor: { argb: '36A7C4' } // 背景色#36a7c4
        },
        font: {
            color: { argb: 'FFFFFF' }, // 文字白色
            size: 14
        },
        alignment: {
            vertical: 'middle',
            horizontal: 'left'
        },
        border: {
            left: { style: 'thin', color: { argb: 'FFFFFF' } },
            bottom: { style: 'thin', color: { argb: 'DDDEE2' } }
        }
    };

    // 处理表头行（兼容colspan）
    let colIndex = 1; // ExcelJS列从1开始计数
    const headerCells = headerRow.querySelectorAll('th');
    headerCells.forEach(th => {
        const cell = worksheet.getCell(1, colIndex);
        cell.value = th.textContent.trim();
        cell.style = headerCellStyle;
        
        // 处理合并单元格
        const colspan = parseInt(th.getAttribute('colspan')) || 1;
        if (colspan > 1) {
            worksheet.mergeCells(1, colIndex, 1, colIndex + colspan - 1);
            colIndex += colspan;
        } else {
            colIndex++;
        }
        
        // 匹配表头对齐方式
        const align = th.style.textAlign || 'left';
        cell.alignment.horizontal = align;
    });

    // 处理表体数据
    bodyRows.forEach((row, rowIndex) => {
        const cells = row.querySelectorAll('td');
        cells.forEach((cell, cellIndex) => {
            worksheet.getCell(rowIndex + 2, cellIndex + 1).value = cell.textContent.trim();
        });
    });

    // 设置列宽（可选）
    worksheet.columns.forEach(col => {
        col.width = 25;
    });

    // 生成并下载文件
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    saveAs(blob, 'Report.xlsx');
}

依赖引入 #

在HTML的</body>标签前添加以下CDN链接：

<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

关键说明 #

• ExcelJS原生支持样式、合并单元格等高级Excel操作，无需依赖SheetJS的分支版本
• 代码完整兼容页面表头的colspan属性，保持导出结构和页面一致
• 样式设置完全匹配页面表头的视觉效果（背景色、文字色、边框、对齐方式等）

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