如何加载.xlsx文件并直接显示其数据而无需文件上传操作

要实现页面加载自动读取本地xlsx文件、无需用户手动上传，按以下步骤调整代码即可：

前置操作 #

把你需要展示的.xlsx文件放到React项目的public文件夹下，命名为data.xlsx（可自定义名称，后续路径对应修改即可）。

修改后完整代码 #

import React, { useState, useEffect } from "react";
import "./App.css";
import * as XLSX from "xlsx";

function App() {
  const [items, setItems] = useState([]);

  // 组件挂载时自动读取xlsx
  useEffect(() => {
    const readExcel = async () => {
      try {
        // 请求public目录下的静态xlsx文件
        const response = await fetch("/data.xlsx");
        const bufferArray = await response.arrayBuffer();
        // 解析逻辑和之前完全一致
        const wb = XLSX.read(bufferArray, { type: "buffer" });
        const wsname = wb.SheetNames[0];
        const ws = wb.Sheets[wsname];
        const data = XLSX.utils.sheet_to_json(ws);
        setItems(data);
      } catch (error) {
        console.error("读取xlsx文件失败：", error);
      }
    };

    readExcel();
  }, []);

  return (
    <div>
      {/* 删掉了原来的文件上传input */}
      <table className="table container">
        <thead>
          <tr>
            <th scope="col">Agent</th>
            <th scope="col">Property_type</th>
          </tr>
        </thead>
        <tbody>
          {items.map((d, index) => (
            // 这里给key加了index兜底，避免d.agent重复导致报错
            <tr key={`${d.agent}-${index}`}>
              {/* 注意：原来的d.agent.steve大概率是写错了，正常sheet_to_json解析后d.agent就是对应Agent列的值，不需要再加.steve */}
              <th>{d.agent}</th>
              <td>{d.property_type}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

核心修改点说明 #

• 新增useEffect钩子，依赖项设为空数组，保证只在组件首次加载完成后执行一次读取逻辑
• 替换原来的FileReader读取用户上传文件的逻辑，改用fetch请求项目静态资源目录下的xlsx文件
• 移除了页面上的文件上传输入框
• 修复了原代码里表格行key可能重复、字段读取错误的潜在问题

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