升级React AG Grid至32.2.0后Excel导出功能失效求助

1. 确保依赖版本完全一致 #

先卸载旧版本依赖，统一安装32.2.0版本的AG Grid相关包：

npm uninstall ag-grid-react ag-grid-community ag-grid-enterprise
npm install ag-grid-react@32.2.0 ag-grid-community@32.2.0 ag-grid-enterprise@32.2.0

2. 入口文件正确导入并配置Enterprise许可证 #

在项目入口文件（如src/index.js或src/main.jsx）中，严格遵循导入顺序：先导入Enterprise包，再配置许可证，最后渲染应用：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 必须优先导入ag-grid-enterprise，确保模块初始化
import 'ag-grid-enterprise';
import { LicenseManager } from 'ag-grid-enterprise';

// 配置你的Enterprise许可证密钥
LicenseManager.setLicenseKey('你的AG Grid Enterprise许可证密钥');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3. 组件内实现Excel导出功能 #

在使用AG Grid的业务组件（如src/App.jsx）中，通过ref获取gridApi并调用导出方法：

import React, { useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
// 导入AG Grid基础样式
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

function App() {
  const gridRef = useRef();

  // 导出Excel点击事件
  const handleExportExcel = () => {
    if (gridRef.current?.api) {
      gridRef.current.api.exportDataAsExcel({
        fileName: '表格数据导出.xlsx',
        // 可选：指定导出列，不填则导出所有可见列
        columnKeys: ['make', 'model', 'price']
      });
    }
  };

  // 列定义
  const columnDefs = [
    { field: 'make', headerName: '品牌' },
    { field: 'model', headerName: '型号' },
    { field: 'price', headerName: '价格' }
  ];

  // 示例数据
  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600, margin: '20px' }}>
      <button onClick={handleExportExcel} style={{ marginBottom: '10px', padding: '8px 16px' }}>
        导出Excel
      </button>
      <AgGridReact
        ref={gridRef}
        columnDefs={columnDefs}
        rowData={rowData}
        // 明确启用Enterprise模块（默认已启用，可显式声明避免歧义）
        enableEnterpriseModules={true}
      />
    </div>
  );
}

export default App;

4. 常见问题排查 #

• 导入顺序错误：必须先导入ag-grid-enterprise，再执行许可证配置或渲染组件，否则模块无法正确初始化。
• 版本不兼容：所有AG Grid相关包版本必须完全一致，版本差异会导致功能调用失败。
• Tree Shaking误删模块：若使用Vite/Webpack的Tree Shaking，确保ag-grid-enterprise未被误移除。可在入口文件保留导入语句（即使无直接调用），或在构建配置中添加模块保留规则。
• 许可证无效：确认许可证密钥对应AG Grid 32.x版本，密钥过期或不匹配也会触发功能禁用。

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