使用ExcelStyle导出Ag-Grid至Excel致浏览器无响应的解决方案需求

1. 精准控制ExcelStyle的应用范围 #

不要给所有单元格/列批量套用ExcelStyle，只给需要货币格式的目标列单独配置样式，避免全局遍历处理所有单元格带来的性能开销。

// 列定义中仅为货币列设置ExcelStyle
columnDefs = [
  { 
    headerName: '金额', 
    field: 'amount',
    // 直接为该列指定货币格式的Excel样式
    excelStyle: {
      numberFormat: '_[$¥-zh-CN]* #,##0.00_ ;_[$¥-zh-CN]* -#,##0.00_ ;_[$¥-zh-CN]* "-"??_ ;_@_ '
    }
  },
  // 其他无需特殊格式的列不配置excelStyle
  { headerName: '商品名称', field: 'productName' },
  { headerName: '数量', field: 'quantity' }
];

2. 优化全局ExcelStyle定义（若必须使用全局样式） #

如果需要复用样式，仅定义必要的货币格式规则，避免冗余的样式属性，同时仅给目标列关联该样式ID，减少样式解析量。

gridOptions = {
  // 仅定义所需的货币格式样式
  excelStyles: [
    {
      id: 'currencyFormat',
      numberFormat: '_[$¥-zh-CN]* #,##0.00_ ;_[$¥-zh-CN]* -#,##0.00_ ;_[$¥-zh-CN]* "-"??_ ;_@_ '
    }
  ],
  columnDefs: [
    { headerName: '金额', field: 'amount', excelStyle: 'currencyFormat' },
    // 其他列不关联样式ID
    { headerName: '商品名称', field: 'productName' }
  ]
};

3. 分批导出大数据量内容 #

如果导出的数据量较大（比如超过5000条），一次性处理所有数据会导致浏览器主线程阻塞，可通过分页分批获取数据后再合并导出：

async exportLargeDataset() {
  const totalPages = this.gridApi.paginationGetTotalPages();
  let allExportData = [];

  // 遍历每一页，收集数据
  for (let pageIndex = 0; pageIndex < totalPages; pageIndex++) {
    this.gridApi.paginationGoToPage(pageIndex);
    const currentPageData = this.gridApi.getRenderedNodes().map(node => node.data);
    allExportData = [...allExportData, ...currentPageData];
  }

  // 导出整合后的数据，同时应用样式
  this.gridApi.exportDataAsExcel({
    data: allExportData,
    columnDefs: this.columnDefs, // 带货币格式的列定义
    skipHeader: false
  });
}

4. 用cellStyle替代全局ExcelStyle #

通过exportDataAsExcel的cellStyle回调函数，仅给目标单元格设置货币格式，这种方式比全局ExcelStyle的遍历效率更高：

this.gridApi.exportDataAsExcel({
  // 仅对金额列设置货币格式
  cellStyle: (params) => {
    if (params.column.colId === 'amount') {
      return {
        numberFormat: '_[$¥-zh-CN]* #,##0.00_ ;_[$¥-zh-CN]* -#,##0.00_ ;_[$¥-zh-CN]* "-"??_ ;_@_ '
      };
    }
    return null; // 其他单元格不应用样式
  }
});

5. 后端导出（大数据量场景首选） #

如果数据量超过1万条，前端导出本身存在性能瓶颈，建议由后端生成Excel文件后返回下载链接，完全避免浏览器卡顿问题。

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