Angular导出Excel时为行添加颜色的问题排查与修正

你的代码无法导出带颜色的Excel，核心问题是SheetJS基础版不支持样式、循环逻辑错误、样式赋值方式不符合规范，以下是具体修正步骤：

1. 替换依赖库，启用样式支持 #

SheetJS（xlsx）核心包不支持单元格样式，需安装支持样式的分支版本：

npm install sheetjs-style --save
# 如需TypeScript类型支持，额外安装
npm install @types/xlsx --save-dev

在组件中替换导入语句：

import * as XLSX from 'sheetjs-style';

2. 修正循环与样式赋值逻辑 #

原代码遍历所有行列、错误操作整行的逻辑完全不合理，应先定位目标列（比如budgetStatus列），再遍历数据行给对应单元格/整行添加样式：

修正后的exportExcel方法 #

exportExcel() {
    const combinedTable = this.combineTables(this.projects, this.projectDetails);
    const worksheet = XLSX.utils.json_to_sheet(combinedTable);
    const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };

    // 定位budgetStatus列的索引
    let budgetStatusColIndex = -1;
    for (const cellAddress in worksheet) {
        if (worksheet.hasOwnProperty(cellAddress)) {
            const cellPos = XLSX.utils.decode_cell(cellAddress);
            // 表头行是r=0，匹配列名
            if (cellPos.r === 0 && worksheet[cellAddress].v === 'budgetStatus') {
                budgetStatusColIndex = cellPos.c;
                break;
            }
        }
    }

    // 遍历数据行，根据状态设置样式
    if (budgetStatusColIndex !== -1) {
        for (let rowIndex = 1; rowIndex <= combinedTable.length; rowIndex++) {
            const cellAddress = XLSX.utils.encode_cell({ r: rowIndex, c: budgetStatusColIndex });
            const statusValue = worksheet[cellAddress]?.v;

            // 替换为你HTML表格中对应的颜色判断逻辑
            let cellStyle = {};
            if (statusValue === '超预算') {
                cellStyle = {
                    fill: { fgColor: { rgb: 'FFFF0000' } }, // 红色背景
                    font: { color: { rgb: 'FFFFFFFF' } } // 白色字体
                };
            } else if (statusValue === '正常') {
                cellStyle = { fill: { fgColor: { rgb: 'FF00FF00' } } }; // 绿色背景
            }

            // 给当前单元格设置样式
            if (worksheet[cellAddress]) {
                worksheet[cellAddress].s = cellStyle;
            }

            // 如需整行变色，取消注释以下代码
            // const totalCols = Object.keys(combinedTable[0]).length;
            // for (let colIndex = 0; colIndex < totalCols; colIndex++) {
            //     const rowCellAddr = XLSX.utils.encode_cell({ r: rowIndex, c: colIndex });
            //     if (worksheet[rowCellAddr]) worksheet[rowCellAddr].s = cellStyle;
            // }
        }
    }

    // 生成buffer时需启用cellStyles参数
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array', cellStyles: true });
    this.saveAsExcelFile(excelBuffer, 'combined_products');
}

3. 修正样式格式细节 #

• SheetJS的颜色值需为不带#的十六进制字符串，不透明颜色前缀加FF（比如不透明红色是FFFF0000）
• 样式绑定到单个单元格，整行样式需遍历行内所有单元格逐一设置

4. 关联HTML表格的颜色逻辑 #

如果HTML表格是动态根据数据设置颜色，可从DOM读取样式并转换为SheetJS格式：

// 示例：获取HTML表格行的背景色
getRowBgColor(rowIndex: number): string {
    const tableRow = document.querySelector(`#your-table-id tr:nth-child(${rowIndex + 2})`); // 跳过表头
    if (!tableRow) return '';
    
    const bgColor = window.getComputedStyle(tableRow).backgroundColor;
    const rgbMatch = bgColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
    if (!rgbMatch) return '';
    
    const r = parseInt(rgbMatch[1], 10).toString(16).padStart(2, '0');
    const g = parseInt(rgbMatch[2], 10).toString(16).padStart(2, '0');
    const b = parseInt(rgbMatch[3], 10).toString(16).padStart(2, '0');
    return `FF${r}${g}${b}`;
}

在遍历数据行时调用该方法，将获取的颜色赋值到样式中即可。

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