当前位置：首页 > news >正文

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

news 来源：原创 2025/5/19 16:19:09

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;