Angular使用XLSX生成Excel报表时嵌套JSON数据导出格式异常

问题现象 #

在Angular项目中开发Excel报表导出功能时，待导出JSON包含嵌套数组类型字段forma_pago_cliente，数据结构示例如下：

[
  {
    // 其余业务字段省略
    "forma_pago_cliente": [
      {
        "metodo": "product 1",
        "total": "12"
      },
      {
        "metodo": "product 2",
        "total": "45"
      }
    ]
  }
]

直接调用XLSX.utils.json_to_sheet方法转换原始JSON生成工作表导出时，嵌套数组字段无法正常渲染为预期的拆分列/拆分行格式，导出结果不符合要求。

原有问题代码 #

// 直接传入原始嵌套JSON生成工作表
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json, {
  cellDates: true,
});

const workbook: XLSX.WorkBook = {
  Sheets: {
    tiquetes_vuelos: worksheet,
  },
  SheetNames: [
    'tiquetes_vuelos',
  ],
};

const excelBuffer: any = XLSX.write(workbook, {
  bookType: 'xlsx',
  type: 'array',
});

this.saveAsExcel(excelBuffer, excelFileName);

问题原因 #

XLSX.utils.json_to_sheet方法默认仅支持一层结构的JSON对象转换，传入嵌套数组/对象时，会直接将嵌套值转换为[object Object]类的字符串写入单元格，不会自动做展开、拆分处理。

解决步骤 #

• 数据预处理：扁平化嵌套结构
  在调用转换方法前，先遍历原始数据，将嵌套的forma_pago_cliente数组展开为平铺结构：单条原始数据如果对应N个支付方式条目，就生成N条平铺行，非嵌套的公共字段在所有行中保留相同值，嵌套数组内的metodo、total属性拆分为独立列。
  预处理参考代码：

  function flattenExportData(rawList: any[]): any[] {
    const result: any[] = [];
    rawList.forEach(row => {
      // 拆分出嵌套数组字段和公共字段
      const { forma_pago_cliente, ...commonCols } = row;
      // 每个支付条目生成一行平铺数据
      forma_pago_cliente.forEach(pay => {
        result.push({
          ...commonCols,
          metodo: pay.metodo,
          total: pay.total
        });
      });
    });
    return result;
  }
  

• 替换转换逻辑的入参
  用预处理后的平铺数据代替原始JSON传入json_to_sheet方法，后续工作簿生成、导出逻辑无需修改：

  const flatData = flattenExportData(json);
  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(flatData, {
    cellDates: true,
  });
  // 原有workbook生成、write、保存逻辑保持不变
  

• 可选：实现公共字段合并效果
  如果需要让同一条原始记录对应的多行公共字段做单元格合并（和常见报表格式一致），可以在生成worksheet后手动配置合并范围，示例配置：

  // 配置单元格合并规则，s代表起始位置，e代表结束位置，r是行索引（从0开始），c是列索引（从0开始）
  worksheet['!merges'] = [
    // 示例：第1列（A列）第2行到第3行合并，对应第一条记录的公共字段
    { s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },
    // 按实际数据遍历计算所有需要合并的范围即可
  ];
  

内容的提问来源于stack exchange，提问作者Juan Camilo López Morales