为何React AG Grid Community无法使用csv export功能？

问题描述 #

我当前的React AG Grid表格配置如下：

// imports
...
import { AgGridReact } from '@ag-grid-community/react';
import '@ag-grid-community/styles/ag-grid.css';
import '@ag-grid-community/styles/ag-theme-alpine.css';
import '@ag-grid-community/csv-export';
import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
...

const onBtnExport = useCallback(() => {
  gridRef.current.api.exportDataAsCsv();
}, []);

return (
<div>
 <button variant="outlined" onClick={onBtnExport}>Excel出力</button>

 <AgGridReact
  flex={1}
  colResizeDefault='shift'
  ref={gridRef}
  rowHeight={20}
  rowData={rowData}
  rowSelection={'single'}
  columnDefs={grabColumnHeadBy(searchPage)}
  defaultColDef={defaultColDef}
  onGridReady={onGridReady}
  onSelectionChanged={onSelectionChanged}
  rowMultiSelectWithClick={true}
  pagination={true}
  suppressCsvExport={false}
  tooltipShowDelay={0}
  tooltipMouseTrack={true}>
 </AgGridReact>
</div>
);

我根据React AG Grid文档认为社区版可直接使用CSV导出API，但调用上述onBtnExport函数时出现以下警告：

moduleRegistry.js:
       AG Grid: unable to use api.exportDataAsCSv as module @ag-grid-community/csv-export is not present.

请问我还遗漏了什么配置？

解决方案 #

你遗漏了注册CSV导出模块的步骤，AG Grid社区版的功能模块需要通过ModuleRegistry手动注册才能生效。

具体修改步骤：

• 从@ag-grid-community/csv-export中导入CsvExportModule类
• 在组件初始化阶段，将CsvExportModule与已有的ClientSideRowModelModule一起通过ModuleRegistry.registerModules完成注册

修改后的代码示例：

// imports
...
import { AgGridReact } from '@ag-grid-community/react';
import '@ag-grid-community/styles/ag-grid.css';
import '@ag-grid-community/styles/ag-theme-alpine.css';
import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
// 新增导入具体模块类
import { CsvExportModule } from '@ag-grid-community/csv-export';
...

// 注册模块，放在组件外部或useEffect中确保只执行一次
ModuleRegistry.registerModules([ClientSideRowModelModule, CsvExportModule]);

const onBtnExport = useCallback(() => {
  gridRef.current.api.exportDataAsCsv();
}, []);

// 后续组件返回代码保持不变
return (
<div>
 <button variant="outlined" onClick={onBtnExport}>Excel出力</button>

 <AgGridReact
  flex={1}
  colResizeDefault='shift'
  ref={gridRef}
  rowHeight={20}
  rowData={rowData}
  rowSelection={'single'}
  columnDefs={grabColumnHeadBy(searchPage)}
  defaultColDef={defaultColDef}
  onGridReady={onGridReady}
  onSelectionChanged={onSelectionChanged}
  rowMultiSelectWithClick={true}
  pagination={true}
  suppressCsvExport={false}
  tooltipShowDelay={0}
  tooltipMouseTrack={true}>
 </AgGridReact>
</div>
);

之前仅导入了@ag-grid-community/csv-export包但未导入具体模块类，也未完成注册，导致AG Grid无法识别并启用该导出功能。

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