如何使用Angular ag-grid将两个表格导出至同一Excel工作表？

要将两个ag-grid表格导出到同一个Excel工作表，你需要手动合并两个表格的Excel数据，再使用exportAsExcel方法导出单个工作表（exportMultipleSheetsAsExcel仅用于导出多工作表）。具体实现步骤如下：

1. 获取两个表格的Excel数据
   分别调用两个表格实例的getSheetDataForExcel()方法，获取各自的表头和行数据集合。

2. 合并数据集合

   • 保留第一个表格的表头作为合并后工作表的统一表头
   • 将第二个表格的行数据（跳过自身表头）追加到第一个表格的行数据之后；若需区分两个表格，可在中间插入一行分隔标识

3. 导出合并后的工作表
   使用exportAsExcel方法传入合并完成的数据，完成单工作表导出。

示例代码 #

// 获取两个表格的Excel数据，处理可能的undefined情况
const degradeSheetData = this.degradeTable.api?.getSheetDataForExcel() || [];
const benchmarkSheetData = this.benchmarkTable.api?.getSheetDataForExcel() || [];

// 合并数据：保留第一个表格表头，追加第二个表格的行数据（跳过其表头）
const mergedSheetData = [
  ...degradeSheetData,
  // 可选：添加分隔行区分两个表格数据，取消注释即可使用
  // ['--- 基准表格数据分割线 ---'],
  ...benchmarkSheetData.slice(1) // 跳过第二个表格的表头行
];

// 导出合并后的单个工作表
exportAsExcel({
  data: mergedSheetData,
  fileName: 'ag-grid-merged.xlsx',
});

补充说明 #

• 如果需要保留第二个表格的表头，移除slice(1)即可，但会出现重复表头，建议搭配分隔行使用
• 通过|| []处理getSheetDataForExcel()可能返回的undefined，避免代码报错

内容的提问来源于stack exchange，提问作者Miguel Ángel Martín