下载HTML表格至Excel/CSV时移除Decimal Pipe保留原始值的方案

核心逻辑是页面显示用格式化后的值，下载时直接调用原始数值数据源，下面是几种实用的实现方案：

方案1：维护原始数据源（推荐） #

页面渲染时使用Decimal Pipe格式化数值，但单独保留一份未处理的原始数据集合，下载Excel/CSV时直接基于这份原始数据生成文件，完全不依赖DOM内容。

示例（Angular环境） #

1. 组件中定义原始数据和格式化后的显示数据：

// 原始未格式化数据
rawData = [
  { id: 1, amount: 123.4567 },
  { id: 2, amount: 987.6543 }
];

// 用于页面显示的格式化后数据
displayData = this.rawData.map(item => ({
  ...item,
  displayAmount: this.decimalPipe.transform(item.amount, '1.2-2')
}));

2. 模板中渲染格式化后的数据：

<table>
  <thead>
    <tr><th>ID</th><th>金额</th></tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of displayData">
      <td>{{item.id}}</td>
      <td>{{item.displayAmount}}</td>
    </tr>
  </tbody>
</table>

3. 下载逻辑直接使用原始数据生成CSV/Excel：

downloadCSV() {
  // 处理CSV字段转义（避免逗号、引号导致格式错误）
  const formatField = (field: any) => {
    if (typeof field === 'string' && (field.includes(',') || field.includes('"'))) {
      return `"${field.replace(/"/g, '""')}"`;
    }
    return field;
  };

  // 生成表头和行数据
  const headers = ['ID', '金额'].map(formatField);
  const rows = this.rawData.map(item => [
    formatField(item.id),
    formatField(item.amount)
  ]);

  // 拼接CSV内容并下载
  const csvContent = [headers.join(','), ...rows.map(row => row.join(','))].join('\n');
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = '原始数据.csv';
  a.click();
  URL.revokeObjectURL(url);
}

方案2：在DOM中存储原始数值 #

如果不想维护两份数据，可以在表格单元格上通过自定义属性存储原始数值，下载时读取该属性值而非单元格显示文本。

示例 #

1. 模板中给单元格添加原始数据属性：

<td data-original-value="{{item.amount}}">{{item.amount | number:'1.2-2'}}</td>

2. 下载时读取自定义属性：

function downloadCSV() {
  const table = document.getElementById('data-table');
  const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent.trim());
  const rows = Array.from(table.querySelectorAll('tbody tr')).map(tr => {
    return Array.from(tr.querySelectorAll('td')).map(td => {
      // 优先取原始值， fallback到显示文本
      return td.dataset.originalValue || td.textContent.trim();
    });
  });

  // 后续CSV生成逻辑同方案1
}

方案3：隐藏原始数据列 #

在表格中添加一个隐藏列存放原始数值，下载时专门提取该列数据，忽略格式化后的显示列。这种方法适合快速改造现有表格，但需注意表格结构变化可能影响其他功能（如排序、筛选）。

示例 #

<table>
  <tbody>
    <tr *ngFor="let item of data">
      <td>{{item.id}}</td>
      <td>{{item.amount | number:'1.2-2'}}</td>
      <!-- 隐藏列存储原始值 -->
      <td style="display: none;">{{item.amount}}</td>
    </tr>
  </tbody>
</table>

下载时遍历每行，取最后一列（隐藏列）的内容作为原始数值即可。

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