React项目使用xlsx包读取本地Excel触发Sheets属性不存在报错如何解决

你遇到的报错核心原因不是路径问题，是你错误地把字符串类型的文件路径直接当做了解析完成的Excel工作簿对象使用：

• 你声明的fileName只是值为./data/menu.xlsx的字符串，字符串本身当然不存在Sheets、SheetNames这类属性，这就是控制台报错的直接原因。
• 其次你当前的文件存放路径也不符合React静态资源访问规则，本地的Excel文件需要放在项目public目录下才能被正常请求获取。

1. 调整文件存放位置：把你项目里的data文件夹移动到根目录的public文件夹下，保证静态资源服务可以正常访问到menu.xlsx。
2. 调整代码逻辑：先请求获取Excel文件的二进制内容，再通过xlsx包解析内容，不要直接操作路径字符串。

import "./App.css";
import XLSX from "xlsx";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    // 异步请求Excel文件
    fetch("/data/menu.xlsx")
      .then((res) => res.arrayBuffer())
      .then((buffer) => {
        // 解析二进制内容得到工作簿对象
        const workbook = XLSX.read(buffer, { type: "buffer" });
        // 取第一个工作表
        const first_worksheet = workbook.Sheets[workbook.SheetNames[0]];
        // 转成json格式
        const data = XLSX.utils.sheet_to_json(first_worksheet, { header: 1 });
        console.log("解析得到的Excel内容：", data);
      });
  }, []);

  return <div className="App"></div>;
}

export default App;

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