ag-grid-react 列表导出csv列表getDataAsCsv （自界说导出列表设置）自界说新增，修改导出内容

1.ag-grid-react getDataAsCsv 新增导出字段
方法：暂时添加列再导出
你可以通过 columnApi.setColumnDefs() 暂时添加需要导出的字段，然后再调用 getDataAsCsv，导出后再恢复原来的列。

1. import { useRef } from 'react';
2. import { AgGridReact } from 'ag-grid-react';
3. import 'ag-grid-community/styles/ag-grid.css';
4. import 'ag-grid-community/styles/ag-theme-alpine.css';
5. import { cloneDeep } from 'lodash';
7. const MyGrid = () => {
8.   const gridRef = useRef(null);
10.   const extraExportColumn = {
11.     headerName: "Hidden Info",
12.     field: "hiddenInfo",
13.     suppressColumnsToolPanel: true,
14.     hide: true, // 不在界面上显示
15.   };
17.   const rowData = [
18.     { name: "Alice", age: 25, hiddenInfo: "Secret A" },
19.     { name: "Bob", age: 30, hiddenInfo: "Secret B" },
20.   ];
22.   const exportWithExtraField = () => {
23.     const api = gridRef.current.api;
24.     const columnApi = gridRef.current.columnApi.columnController;
25.     const originalColumnDefs = cloneDeep(columnApi.columnDefs)
27.     const updatedDefs = [...originalColumnDefs, extraExportColumn];
28.     columnApi.setColumnDefs(updatedDefs);
30.     const csv = api.getDataAsCsv();
31.     const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
33.     // 下载
34.     const link = document.createElement("a");
35.     link.href = URL.createObjectURL(blob);
36.     link.download = "export.csv";
37.     link.click();
39.     // 恢复原始列定义
40.     columnApi.setColumnDefs(originalColumnDefs);
41.   };
43.   return (
44.     <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
45.       <button onClick={exportWithExtraField}>导出包含隐藏字段</button>
46.       <AgGridReact
47.         ref={gridRef}
48.         rowData={rowData}
49.         columnDefs={originalColumnDefs}
50.       />
51.     </div>
52.   );
53. };
55. export default MyGrid;

复制代码

api：getDataAsCsv(params) 导出列表api设置可参考官网，
columnKeys： 可设置 需要导出项，默认列表展示啥导出啥
fileName：‘sheet-1’，注意这里是页脚
processCellCallback：(params) => {} 导出单位格数据处置惩罚
https://ag-grid.com/react-data-grid/csv-export/#reference-CsvExportParams-columnKeys
焦点代码columnApi.setColumnDefs ，这个api 同步的，不能用react setSate异步 一影响列表加载
欢迎大家留言，支持的点个赞