React使用react-data-export导出带样式Excel遇JSZip 3.0报错

问题根源 #

你使用的react-data-export库已长期无人维护，它依赖的是JSZip 2.x版本，但当前项目中可能通过其他依赖引入了JSZip 3.x（3.x移除了2.x中的核心方法），导致兼容性报错；另外该库在浏览器环境错误调用了Node.js专属的fs模块，这也是你之前遇到fs相关问题的原因。

解决方案：替换为维护活跃的现代库 #

推荐使用exceljs（支持完整样式定制、浏览器友好）+ file-saver（处理前端文件下载）的组合，完全替代react-data-export，步骤如下：

1. 清理旧依赖 #

卸载过时的react-data-export：

npm uninstall react-data-export
# 或 yarn 命令
yarn remove react-data-export

2. 安装新依赖 #

npm install exceljs file-saver
# 或 yarn 命令
yarn add exceljs file-saver

3. 修改组件代码 #

替换原导出逻辑，适配新库API，同时保留你需要的所有样式（表头加粗、单元格底色、字体大小、列宽等）：

import React, { useEffect, useState } from 'react';
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';
import MainData from '../data/data.json';

function HomeScreen() {
  const [data, setData] = useState({});

  useEffect(() => {
    setData(MainData);
  }, []);

  // 导出Excel核心函数
  const exportToExcel = async () => {
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Datareport');

    // 设置表头样式与列宽
    const headerStyle = {
      font: { size: 18, bold: true },
      alignment: { vertical: 'middle', horizontal: 'center' }
    };
    worksheet.columns = [
      { header: 'ID', key: 'id', width: 12.5, style: headerStyle }, // 对应原wpx:125，exceljs宽度单位为字符
      { header: 'Last Update', key: 'lastUpdate', width: 30, style: headerStyle },
      { header: 'Action', key: 'action', width: 15 },
      { header: 'Element ID', key: 'elementID', width: 20 },
      { header: 'Name', key: 'name', width: 20 }
      // 补充你需要的其他列配置
    ];

    // 遍历数据添加行并设置单元格样式
    data?.content?.forEach(item => {
      // 添加数据行
      const row = worksheet.addRow({
        action: item.action,
        elementID: item.elementID,
        id: item.id,
        name: item.name
        // 补充其他字段
      });

      // 设置ID单元格样式（蓝底白字）
      row.getCell('id').style = {
        font: { color: { argb: 'FFFFFFFF' } },
        fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF3461EB' } }
      };
      // 设置Name单元格样式（红底白字）
      row.getCell('name').style = {
        font: { color: { argb: 'FFFFFFFF' } },
        fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFEB1207' } }
      };
      // 设置其余单元格字体大小
      row.eachCell(cell => {
        if (!['id', 'name'].includes(cell.key)) {
          cell.style.font = { size: 14 };
        }
      });
    });

    // 生成文件并触发下载
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    saveAs(blob, 'data.xlsx');
  };

  return (
    <div>
      <h1>Data</h1>
      {/* 替换原导出按钮 */}
      <button onClick={exportToExcel}>Export</button>
      
      <ul>
        <li>id: {data.id}</li>
        <li>last update: {data.lastUpdated}</li>
        <li>members: {data.members}</li>
        {/* 补充其他列表项 */}
      </ul>

      <table>
        <thead>
          <tr>
            <th>action</th>
            <th>elementID</th>
            <th>id</th>
            <th>name</th>
            {/* 补充其他表头 */}
          </tr>
        </thead>
        <tbody>
          {data?.content?.map((item, index) => (
            <tr key={index}>
              <td>{item?.action}</td>
              <td>{item?.elementID}</td>
              <td>{item?.id}</td>
              {/* 补充其他单元格 */}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default HomeScreen;

关键说明 #

• exceljs完全适配浏览器环境，不会调用Node.js的fs模块，彻底解决之前的fs相关问题；
• 样式配置更灵活，支持字体、颜色、填充、对齐等多种自定义样式；
• 依赖的JSZip版本兼容3.x，从根源避免版本冲突报错。

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