求助：Angular中导出带CSS样式的HTML表格至Excel

原生的xlsx、tableexport等库默认只提取表格数据，不支持保留CSS样式，以下是两种能解决问题的方案：

方案一：使用xlsx-style扩展库（精确控制样式） #

xlsx-style是xlsx的fork版本，支持为Excel单元格添加样式，需要手动将HTML的class映射为Excel的样式规则。

步骤1：安装依赖 #

npm install xlsx-style --save

步骤2：修改导出代码 #

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

// ...组件代码

@ViewChild('excel_table', { static: false }) excel_table: ElementRef;

generateExcelTable3() {
  const tableData = this.excel_table.nativeElement;
  // 将HTML表格转换为worksheet
  const ws = XLSX.utils.table_to_sheet(tableData);
  
  // 遍历表格行和单元格，根据class设置样式
  const rows = tableData.querySelectorAll('tr');
  rows.forEach((row, rowIndex) => {
    const cells = row.querySelectorAll('td');
    cells.forEach((cell, cellIndex) => {
      const cellAddress = XLSX.utils.encode_cell({ r: rowIndex, c: cellIndex });
      if (!ws[cellAddress]) return;

      // 初始化基础边框样式
      ws[cellAddress].s = {
        border: {
          top: { style: 'thin', color: { rgb: '000000' } },
          bottom: { style: 'thin', color: { rgb: '000000' } },
          left: { style: 'thin', color: { rgb: '000000' } },
          right: { style: 'thin', color: { rgb: '000000' } }
        },
        alignment: { vertical: 'center' },
        font: { name: 'Arial', sz: 11 }
      };

      // 匹配table-header样式
      if (cell.classList.contains('table-header')) {
        ws[cellAddress].s.fill = { fgColor: { rgb: 'CCCCCC' } };
        ws[cellAddress].s.font.bold = true;
        ws[cellAddress].s.alignment.horizontal = 'center';
      }

      // 匹配table-td-title样式
      if (cell.classList.contains('table-td-title')) {
        ws[cellAddress].s.font.bold = true;
        if (cell.classList.contains('center-text')) {
          ws[cellAddress].s.alignment.horizontal = 'center';
        }
      }

      // 处理空白间隔行
      if (cell.classList.contains('table-tr-spacer')) {
        ws[cellAddress].s.fill = { fgColor: { rgb: 'FFFFFF' } };
      }
    });
  });

  // 生成工作簿并导出
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([wbout], { type: 'application/octet-stream' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${this.trafoItem.code}.xlsx`;
  a.click();
  URL.revokeObjectURL(url);
}

方案二：HTML转Excel XML格式（利用Excel对HTML的支持） #

Excel可以直接识别包含HTML的XML文件，通过将带内联样式的HTML包装成SpreadsheetML格式，无需额外依赖即可保留大部分样式。

导出代码示例 #

import { ElementRef, ViewChild } from '@angular/core';

// ...组件代码

@ViewChild('excel_table', { static: false }) excel_table: ElementRef;

generateExcelWithStyles() {
  const table = this.excel_table.nativeElement;
  // 构造包含完整样式的HTML内容
  const styledHtml = `
    <html>
      <head>
        <style>
          .table-header { background: #CCCCCC; font-weight: bold; text-align: center; padding: 8px; }
          .table-td-title { font-weight: bold; padding: 6px; }
          .center-text { text-align: center; }
          .table-tr-spacer { height: 12px; }
          table { border-collapse: collapse; width: 100%; }
          td { border: 1px solid #000; }
        </style>
      </head>
      <body>${table.outerHTML}</body>
    </html>
  `;

  // 包装为Excel可识别的SpreadsheetML格式
  const excelXml = `
    <?xml version="1.0"?>
    <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
      xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
      <Worksheet ss:Name="Sheet1">
        <Table>
          <Cell>
            <Data ss:Type="String">${styledHtml.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</Data>
          </Cell>
        </Table>
      </Worksheet>
    </Workbook>
  `;

  // 导出为xls文件（Excel会自动解析内容）
  const blob = new Blob([excelXml], { type: 'application/vnd.ms-excel' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${this.trafoItem.code}.xls`;
  a.click();
  URL.revokeObjectURL(url);
}

注意事项 #

• 部分CSS属性Excel不支持（如复杂选择器、渐变等），建议使用基础样式属性；
• 导出的文件后缀为.xls，Excel可直接打开，如需.xlsx可借助工具转换，或结合jszip打包为xlsx格式。

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