React 18.0.2中用ExcelJS读取CSV文件失败，求可用演示代码

1. 安装依赖 #

首先在React项目中安装ExcelJS：

npm install exceljs
# 或
yarn add exceljs

2. 完整组件代码 #

创建一个包含文件上传和数据解析逻辑的CSV读取组件：

import React from 'react';
import * as ExcelJS from 'exceljs';

const CSVReader = () => {
  const handleFileUpload = async (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;

    try {
      // 将文件转换为ArrayBuffer格式
      const fileBuffer = await selectedFile.arrayBuffer();
      const workbook = new ExcelJS.Workbook();

      // 配置CSV读取选项并读取文件
      await workbook.csv.read(fileBuffer, {
        delimiter: ',', // 适配你的CSV分隔符，如分号则改为';'
        header: true, // 若CSV首行是表头，设为true；无表头则设为false
        trim: true, // 自动去除单元格内容前后空格
      });

      // 获取第一个工作表（CSV文件只会生成一个工作表）
      const worksheet = workbook.worksheets[0];
      if (!worksheet) {
        console.error('未检测到有效工作表');
        return;
      }

      // 将数据解析为结构化JSON
      const header = worksheet.getRow(1).values;
      const parsedData = [];

      // 遍历数据行（跳过表头行）
      worksheet.eachRow({ includeEmpty: false }, (row, rowIndex) => {
        if (rowIndex > 1) {
          const rowObj = {};
          row.values.forEach((cellValue, colIndex) => {
            rowObj[header[colIndex]] = cellValue;
          });
          parsedData.push(rowObj);
        }
      });

      // 输出解析后的数据，可根据需求存入state或进行后续处理
      console.log('解析完成的CSV数据:', parsedData);
    } catch (err) {
      console.error('CSV读取失败:', err.message);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>上传CSV文件</h3>
      <input
        type="file"
        accept=".csv"
        onChange={handleFileUpload}
        style={{ padding: '8px' }}
      />
    </div>
  );
};

export default CSVReader;

3. 关键配置说明 #

• 分隔符设置：如果你的CSV文件使用分号(;)或其他符号分隔，修改delimiter参数即可
• 表头处理：若CSV无表头，将header设为false，直接通过row.values获取数组形式的行数据
• 大文件优化：如果需要处理超大CSV文件，建议使用ExcelJS的流式读取API（workbook.csv.createReadStream），避免内存占用过高

4. 使用方式 #

将该组件导入到你的React页面中直接使用即可，上传符合格式的CSV文件后，控制台会输出解析后的结构化数据。

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