Angular中使用xlsx库导出带CSS样式的HTML表格至Excel遇样式丢失问题

首先得明确：SheetJS的xlsx库在将HTML表格转为Excel时，只会识别内联CSS样式，外部样式表或者组件内的<style>样式是不会被解析的。你已经在用[style.color]绑定内联颜色，这是正确的方向，但可能还需要调整实现方式或者扩展库来支持更多样式。下面给你几个可行的方案：

方案1：直接用Angular绑定内联样式（适合简单场景） #

如果你的样式需求不复杂，直接把所有需要保留的样式通过Angular的属性绑定转为内联样式即可。比如表头背景色、单元格边框、对齐方式这些，都可以用[style.xxx]或者ngStyle来实现：

<table #table>
  <thead>
    <tr>
      <th [style.backgroundColor]="'#e9ecef'"
          [style.fontWeight]="'bold'"
          [style.textAlign]="'center'"
          [style.padding]="'8px'">
        Color
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of copy; index as i">
      <td [style.color]="colors[i]"
          [style.padding]="'8px'"
          [style.border]="'1px solid #dee2e6'">
        {{item}}
      </td>
    </tr>
  </tbody>
</table>

导出时直接用xlsx的table_to_book方法，这些内联样式会被映射到Excel的单元格格式中（注意：Excel只支持部分CSS属性，比如颜色、背景色、字体属性、边框等，复杂布局样式无法识别）。

方案2：用xlsx-style实现复杂样式控制 #

如果需要更精细的样式（比如合并单元格、自定义边框样式、数字格式等），原生xlsx库的支持有限，可以使用xlsx-style（SheetJS的一个分支，专门针对样式优化）：

1. 先安装依赖：

npm install xlsx-style --save

2. 在组件中导入并手动配置单元格样式：

import * as XLSX from 'xlsx-style';
import { ViewChild, ElementRef } from '@angular/core';

export class YourComponent {
  @ViewChild('table') table!: ElementRef;

  exportToExcel() {
    const tableEl = this.table.nativeElement;
    // 将表格转为workbook对象
    const workbook = XLSX.utils.table_to_book(tableEl, { sheet: '颜色列表' });
    const worksheet = workbook.Sheets['颜色列表'];

    // 手动设置表头样式：灰色背景、加粗、居中对齐
    const headerRange = XLSX.utils.decode_range(worksheet['!ref'] || 'A1:A1');
    for (let col = headerRange.s.c; col <= headerRange.e.c; col++) {
      const cellAddr = XLSX.utils.encode_cell({ r: 0, c: col });
      if (worksheet[cellAddr]) {
        worksheet[cellAddr].s = {
          fill: { fgColor: { rgb: 'E9ECEF' } },
          font: { bold: true },
          alignment: { horizontal: 'center' },
          border: {
            top: { style: 'thin' },
            bottom: { style: 'thin' },
            left: { style: 'thin' },
            right: { style: 'thin' }
          }
        };
      }
    }

    // 导出文件
    XLSX.writeFile(workbook, '带样式的颜色表.xlsx');
  }
}

方案3：自动将外部CSS转为内联样式（适合已有大量样式的场景） #

如果你的表格已经用了组件内的CSS类，不想一个个改内联，可以通过JS遍历DOM元素，把计算后的样式转为内联样式，再导出：

import * as XLSX from 'xlsx';
import { ViewChild, ElementRef } from '@angular/core';

export class YourComponent {
  @ViewChild('table') table!: ElementRef;

  exportToExcel() {
    // 克隆表格，避免修改原DOM
    const clonedTable = this.table.nativeElement.cloneNode(true) as HTMLElement;
    // 给所有元素应用内联样式
    this.convertToInlineStyles(clonedTable);
    
    // 导出处理后的表格
    const workbook = XLSX.utils.table_to_book(clonedTable, { sheet: 'Sheet1' });
    XLSX.writeFile(workbook, 'styled-table.xlsx');
  }

  private convertToInlineStyles(element: HTMLElement) {
    const allElements = element.querySelectorAll('*');
    allElements.forEach(el => {
      const computedStyle = window.getComputedStyle(el);
      el.setAttribute('style', computedStyle.cssText);
    });
  }
}

注意：这种方法会把所有计算后的CSS都转为内联，可能包含Excel不支持的属性，导出后需要测试调整，去掉无用样式。

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