React前端读取服务端Excel文件报错TypeError求解决方案

你说得完全对，这个报错的核心原因就是XLSX.readFile()是Node.js环境专属的API——它底层依赖Node的fs模块来读取本地文件系统，但浏览器客户端根本没有这个模块，所以才会抛出_fs.readFileSync is not a function的错误。

要在React客户端读取服务端public文件夹里的Excel文件，得换一种思路：通过HTTP请求获取文件的二进制内容，再用xlsx库解析，具体实现如下：

正确的客户端代码实现 #

因为涉及网络请求，我们需要用异步方式处理：

import XLSX from "xlsx";

const loadExcelData = async () => {
  try {
    // 发起请求获取Excel文件（public文件夹下的文件直接用根路径即可）
    const response = await fetch("/XRayConfig.xlsx");
    // 将响应转为ArrayBuffer格式（xlsx库需要这种二进制格式来解析）
    const arrayBuffer = await response.arrayBuffer();
    // 解析ArrayBuffer为workbook对象
    const workbook = XLSX.read(arrayBuffer, { type: "array" });
    // 转为JSON格式（和你之前的逻辑完全一致）
    const json = XLSX.utils.sheet_to_json(workbook.Sheets.FOV);
    console.log("解析后的Excel数据：", json);
    // 这里可以添加你的业务逻辑处理
  } catch (error) {
    console.error("读取Excel文件失败：", error);
  }
};

// 在组件合适的时机调用，比如组件挂载时
// useEffect(() => {
//   loadExcelData();
// }, []);

关键细节说明 #

• fetch("/XRayConfig.xlsx")：React项目的public文件夹会被部署到服务器根目录，所以直接用相对根路径就能访问目标文件，不用额外拼接window.location.origin（当然加上也不会有问题）。
• XLSX.read()替代XLSX.readFile()：read()方法支持多种输入类型（ArrayBuffer、Blob等），完全适配浏览器客户端环境。
• 异步处理：网络请求是异步操作，所以必须用async/await或者Promise链式调用，不能像Node环境那样同步读取文件。

额外注意事项 #

• 确认XRayConfig.xlsx确实放在了public文件夹根目录，不要放在src文件夹里（src内的文件会被Webpack打包处理，无法直接通过HTTP请求访问）。
• 如果部署后遇到跨域问题，需要确保服务器配置允许访问该静态文件（同域部署的话一般不会出现这个问题）。

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