在React中如何直接读取src文件夹内的Excel文件无需上传操作

前置准备 #

首先安装Excel解析依赖xlsx（前端主流Excel解析工具）：

npm install xlsx
# 或使用yarn
yarn add xlsx

方案一：Excel存放在public目录（无需额外配置，推荐） #

React的public目录下的所有资源都会被原样复制到打包输出目录，可以直接通过相对路径fetch读取：

• 第一步：把你的Excel文件移动到项目public文件夹下，示例路径为public/test.xlsx
• 第二步：在组件中编写读取逻辑，示例代码如下：

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

function App() {
  useEffect(() => {
    // 直接fetch public目录下的Excel文件
    fetch('/test.xlsx')
      .then(res => res.arrayBuffer())
      .then(buffer => {
        // 解析Excel文件
        const workbook = XLSX.read(buffer, { type: 'array' });
        // 获取第一个工作表的数据
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        // 转换为对象数组
        const dataArray = XLSX.utils.sheet_to_json(worksheet);
        // 输出到控制台
        console.log('读取到的Excel数据：', dataArray);
      })
      .catch(err => console.error('读取Excel失败：', err));
  }, []);

  return <div>Excel读取测试</div>;
}

export default App;

方案二：Excel存放在src目录 #

如果必须把文件放在src文件夹下，需要先配置打包工具识别Excel资源，再通过import引入路径后读取：

配置说明 #

• 若使用Create React App（CRA）：无需额外配置，直接import即可得到资源的最终访问路径
• 若使用Vite：在vite.config.js中添加如下配置，让Vite识别xlsx文件为静态资源：

export default defineConfig({
  assetsInclude: ['**/*.xlsx'],
  // 其他原有配置
})

代码示例 #

import * as XLSX from 'xlsx';
import { useEffect } from 'react';
// 引入src目录下的Excel文件，得到资源路径
import excelPath from './test.xlsx';

function App() {
  useEffect(() => {
    fetch(excelPath)
      .then(res => res.arrayBuffer())
      .then(buffer => {
        const workbook = XLSX.read(buffer, { type: 'array' });
        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        const dataArray = XLSX.utils.sheet_to_json(firstSheet);
        console.log('读取到的Excel数据：', dataArray);
      });
  }, []);

  return <div>Excel读取测试</div>;
}

export default App;

• TypeScript项目需要额外安装类型声明：npm install @types/xlsx --save-dev
• 不建议存放体积超过10MB的Excel文件到项目目录，会增大打包体积或静态资源加载耗时
• sheet_to_json方法默认将第一行作为对象的key，如果你需要自定义解析规则，可以传入配置参数，比如header: 1会输出二维数组格式

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