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>
      <AgGridReact
        ref={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异步 一影响列表加载
欢迎大家留言，支持的点个赞