如何导出含不同键的对象数组为带双表结构的CSV文件？

你现在遇到的核心问题是两个循环生成的对象键完全不匹配，export-to-csv会默认用第一个对象的键作为全局表头，导致第二个循环的数据无法匹配表头，出现undefined。要生成包含两个独立表格的CSV，我们可以通过两种方式实现：

方法一：手动构建CSV内容（灵活度最高） #

这种方式不需要依赖库的自动逻辑，完全由我们控制每个表格的表头和数据：

exportBudget() {
  this.tester();
  
  // 处理第一个表格：筛选对应数据、定义表头
  const firstTableHeaders = ['Marketing', 'Canada', 'USA', 'UK', 'Europe', 'Australia', 'RestofWorld'];
  const firstTableRows = this.test.filter(item => 'Canada' in item);
  
  // 拼接第一个表格的CSV内容
  let csvContent = `${firstTableHeaders.join(',')}\n`;
  firstTableRows.forEach(row => {
    // 按表头顺序提取值，空值用空字符串填充
    const rowValues = firstTableHeaders.map(header => `"${row[header] || ''}"`);
    csvContent += `${rowValues.join(',')}\n`;
  });

  // 添加空行分隔两个表格
  csvContent += '\n';

  // 处理第二个表格：同样筛选数据、定义表头
  const secondTableHeaders = ['Marketing', 'Territory', 'Vendor', 'Vendor_Description', 'Amount', 'Date'];
  const secondTableRows = this.test.filter(item => 'Territory' in item);
  
  // 拼接第二个表格的CSV内容
  csvContent += `${secondTableHeaders.join(',')}\n`;
  secondTableRows.forEach(row => {
    const rowValues = secondTableHeaders.map(header => `"${row[header] || ''}"`);
    csvContent += `${rowValues.join(',')}\n`;
  });

  // 触发文件下载
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const downloadUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.setAttribute('download', 'My Awesome CSV.csv');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

方法二：继续使用export-to-csv库，分别生成后拼接 #

如果你想保留使用这个库的习惯，可以分别生成两个表格的CSV字符串，再手动拼接成完整内容：

exportBudget() {
  this.tester();
  
  const options = { 
    fieldSeparator: ',', 
    quoteStrings: '"', 
    decimalSeparator: '.', 
    showLabels: true, 
    showTitle: false, // 关闭库的自动标题，我们自己添加
    useTextFile: false, 
    useBom: true, 
    useKeysAsHeaders: true, 
  };

  const csvExporter = new ExportToCsv(options);
  
  // 筛选出两个表格各自的数据
  const firstTableData = this.test.filter(item => 'Canada' in item);
  const secondTableData = this.test.filter(item => 'Territory' in item);

  // 生成两个表格的CSV字符串（第二个参数传true表示返回字符串，不直接下载）
  const firstTableCsv = csvExporter.generateCsv(firstTableData, true);
  const secondTableCsv = csvExporter.generateCsv(secondTableData, true);

  // 拼接完整的CSV内容：标题 + 第一个表格 + 空行 + 第二个表格
  const fullCsvContent = `My Awesome CSV\n\n${firstTableCsv}\n\n${secondTableCsv}`;

  // 触发下载
  const blob = new Blob([fullCsvContent], { type: 'text/csv;charset=utf-8;' });
  const downloadUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.setAttribute('download', 'My Awesome CSV.csv');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

核心要点说明 #

1. 数据筛选：用filter方法把两个循环生成的不同结构数据分开，确保每个表格只处理对应类型的对象
2. 分隔行：在两个表格之间添加空行，这样打开CSV时两个表格会清晰区分开
3. 表头匹配：手动指定每个表格的表头，确保数据和表头一一对应，避免库自动选表头带来的不兼容问题

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