ag-grid-react 列表导出csv列表getDataAsCsv （自定义导出列表配置）自定义新增，修改导出内容

1.ag-grid-react getDataAsCsv 新增导出字段

方法：临时添加列再导出

你可以通过 columnApi.setColumnDefs() 临时添加需要导出的字段，然后再调用 getDataAsCsv，导出后再恢复原来的列。

import { useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { cloneDeep } from 'lodash';const MyGrid = () => {const gridRef = useRef(null);const extraExportColumn = {headerName: "Hidden Info",field: "hiddenInfo",suppressColumnsToolPanel: true,hide: true, // 不在界面上显示};const rowData = [{ name: "Alice", age: 25, hiddenInfo: "Secret A" },{ name: "Bob", age: 30, hiddenInfo: "Secret B" },];const exportWithExtraField = () => {const api = gridRef.current.api;const columnApi = gridRef.current.columnApi.columnController;const originalColumnDefs = cloneDeep(columnApi.columnDefs)const updatedDefs = [...originalColumnDefs, extraExportColumn];columnApi.setColumnDefs(updatedDefs);const csv = api.getDataAsCsv();const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });// 下载const link = document.createElement("a");link.href = URL.createObjectURL(blob);link.download = "export.csv";link.click();// 恢复原始列定义columnApi.setColumnDefs(originalColumnDefs);};return (<div className="ag-theme-alpine" style={{ height: 400, width: 600 }}><button onClick={exportWithExtraField}>导出包含隐藏字段</button><AgGridReactref={gridRef}rowData={rowData}columnDefs={originalColumnDefs}/></div>);
};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异步 一影响列表加载
欢迎大家留言，支持的点个赞