如何将多个Syncfusion Grid导出至Excel同一张工作表？

现有Syncfusion官方文档仅提供了两个Grid的导出方法，但我需要在单个Excel文件的同一张工作表中导出多个表格，目前仅能实现两个表格的导出，示例代码如下：

if (gridRef) {
        const appendExcelExportProperties = {
            multipleExport: { type: 'AppendToSheet', blankRows: 2 },
        };
        const masterGridRefExport = gridRef.masterGrid.excelExport(
            appendExcelExportProperties,
            true,
        );
        masterGridRefExport.then((fData) => {
            if (gridRef.addressGrid) {
                gridRef.addressGrid.excelExport(appendExcelExportProperties, false, fData);
            }
        });
    }

效果参考截图：

要实现多个Grid导出到同一张Excel工作表，只需基于现有逻辑通过Promise链式调用依次追加后续Grid即可。核心是每次调用excelExport时，传入上一次导出返回的中间数据fData，让新Grid的内容追加到同一张工作表中。

多Grid导出示例（以3个Grid为例） #

if (gridRef) {
  const appendProps = {
    multipleExport: { type: 'AppendToSheet', blankRows: 2 },
  };

  // 链式调用依次导出并追加Grid
  gridRef.masterGrid.excelExport(appendProps, true)
    // 追加第二个Grid
    .then(fData => gridRef.addressGrid?.excelExport(appendProps, false, fData) || fData)
    // 追加第三个Grid，可继续扩展更多
    .then(fData => gridRef.thirdGrid?.excelExport(appendProps, false, fData) || fData)
    // 所有Grid处理完成后触发下载
    .then(finalData => {
      const blob = new Blob([finalData], { 
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'multiple-grids.xlsx';
      a.click();
      URL.revokeObjectURL(url);
    });
}

关键要点 #

• 每次调用excelExport的第三个参数必须传入上一步返回的fData，确保数据追加到同一张工作表
• blankRows参数可控制两个Grid之间的空白行数，按需调整
• 如果Grid数量不固定，可通过循环结合Promise.reduce来批量处理，避免过长的链式调用

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