迁移至Vite后使用react-export-excel出现cptable未定义错误

这个错误是因为react-export-excel依赖的xlsx库在Vite环境下无法自动加载cptable相关资源，而Create React App（CRA）的Webpack配置默认处理了这类静态资源的加载逻辑。以下是几种可行的解决办法：

方法1：手动引入cptable资源 #

在你使用react-export-excel的文件顶部，添加对cpexcel.js的导入：

import 'xlsx/dist/cpexcel.js';
import { ExcelFile, ExcelSheet } from 'react-export-excel';

方法2：配置Vite优化依赖 #

修改项目根目录下的vite.config.js，在optimizeDeps中指定预加载cpexcel.js：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['xlsx/dist/cpexcel.js']
  }
});

方法3：替换为更兼容Vite的导出方案 #

如果上述方法无效，建议直接使用xlsx库实现导出功能，避免依赖react-export-excel的兼容性问题：

import XLSX from 'xlsx';

// 示例导出函数
const exportDataToExcel = (data, sheetName = 'Sheet1', fileName = 'export') => {
  // 将JSON数据转换为工作表
  const worksheet = XLSX.utils.json_to_sheet(data);
  // 创建工作簿并添加工作表
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
  // 导出文件
  XLSX.writeFile(workbook, `${fileName}.xlsx`);
};

// 使用示例
const data = [{ name: '张三', age: 25 }, { name: '李四', age: 30 }];
exportDataToExcel(data, '用户列表', '用户数据');

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