ReactJS项目中如何读取工作区Excel文件并通过xlsx模块处理？

前提准备 #

确保已安装xlsx模块：

npm install xlsx

方案1：读取项目public目录下的静态Excel文件 #

将Excel文件放在React项目的public目录（或其子文件夹，比如public/excel）中，即可通过fetch直接访问：

实现代码 #

import React, { useEffect, useState } from 'react';
import * as XLSX from 'xlsx';

const StaticExcelReader = () => {
  const [excelData, setExcelData] = useState(null);

  useEffect(() => {
    const loadAndParseExcel = async () => {
      try {
        // 路径相对于public目录，比如public/excel/data.xlsx就写'/excel/data.xlsx'
        const res = await fetch('/data.xlsx');
        if (!res.ok) throw new Error('无法获取Excel文件');
        
        // 将响应转为ArrayBuffer，xlsx需要这种格式
        const buffer = await res.arrayBuffer();
        // 读取工作簿
        const workbook = XLSX.read(buffer, { type: 'array' });
        
        // 获取第一个工作表（可根据需求指定表名）
        const targetSheet = workbook.Sheets[workbook.SheetNames[0]];
        // 转为JSON格式
        const jsonData = XLSX.utils.sheet_to_json(targetSheet);
        
        setExcelData(jsonData);
      } catch (err) {
        console.error('处理Excel出错:', err);
      }
    };

    loadAndParseExcel();
  }, []);

  return (
    <div>
      <h3>静态Excel数据</h3>
      {excelData ? (
        <div>
          {excelData.map((row, idx) => (
            <p key={idx}>{JSON.stringify(row)}</p>
          ))}
        </div>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
};

export default StaticExcelReader;

方案2：读取用户上传的本地Excel文件 #

如果需要用户手动选择本地文件，使用input[type="file"]配合FileReader实现：

实现代码 #

import React, { useState } from 'react';
import * as XLSX from 'xlsx';

const ExcelUploadReader = () => {
  const [uploadedData, setUploadedData] = useState(null);

  const handleFileSelect = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const buffer = event.target.result;
        const workbook = XLSX.read(buffer, { type: 'array' });
        const sheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(sheet);
        setUploadedData(jsonData);
      } catch (err) {
        console.error('解析上传文件出错:', err);
      }
    };
    // 以ArrayBuffer格式读取文件
    reader.readAsArrayBuffer(file);
  };

  return (
    <div>
      <input type="file" accept=".xlsx, .xls" onChange={handleFileSelect} />
      {uploadedData && (
        <div>
          <h3>上传的Excel数据</h3>
          <pre>{JSON.stringify(uploadedData, null, 2)}</pre>
        </div>
      )}
    </div>
  );
};

export default ExcelUploadReader;

关键说明 #

• 文件路径：public目录是React的静态资源根目录，生产构建后会被完整复制，所以放在这里的文件可以通过根路径直接访问。
• 数据格式转换：xlsx的XLSX.read方法支持多种输入类型，这里用array类型（ArrayBuffer）是最可靠的方式，不管是fetch获取还是FileReader读取都适用。
• 工作表处理：workbook.SheetNames包含所有工作表名称，可根据需求选择特定工作表；XLSX.utils.sheet_to_json可以将工作表数据转为JSON，方便React渲染和处理。

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