Next.js读取项目根目录Excel并展示为表格的实现求助

先说说你现有代码里的几个问题：

• 代码里的f变量没定义，根本没指定要读取的文件
• 直接在组件顶层执行异步读取操作，不符合React组件的执行逻辑
• 没有用useState存储解析后的数据，就算读取成功也没法触发页面渲染
• sheet_to_csv返回的是CSV格式的字符串，不是数组，没法直接用map遍历生成表格

下面给你两种可行的实现方案，对应不同的场景：

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

如果你的Excel文件是项目内置的静态资源，先把文件放到public目录下（比如命名为data.xlsx），然后用下面的代码实现：

import styles from "./index.module.css";
import { useEffect, useState } from 'react';
import * as XLSX from 'xlsx';

export default function IndexPage() {
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    // 发起请求获取public目录下的Excel文件
    fetch('/data.xlsx')
      .then(res => res.arrayBuffer())
      .then(buffer => {
        // 解析Excel文件
        const wb = XLSX.read(new Uint8Array(buffer), { type: 'array' });
        const wsname = wb.SheetNames[0];
        const ws = wb.Sheets[wsname];
        // 转换为数组格式（headers为true会把第一行作为表头，这里根据你的需求调整）
        const data = XLSX.utils.sheet_to_json(ws, { header: 1 });
        // 跳过表头或者直接使用，这里假设第一行是表头，从第二行开始是数据
        setTableData(data.slice(1));
      })
      .catch(err => console.error('读取文件失败:', err));
  }, []);

  return (
    <table className={styles.table}>
      <thead>
        <tr>
          <th>Pair</th>
          <th>Win / Loss in %</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map((row, i) => (
          <tr key={i}>
            <td>{row[0]}</td>
            <td>{row[1]}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

方案二：允许用户上传Excel文件读取 #

如果是需要用户自己选择本地Excel文件上传读取，用下面的代码：

import styles from "./index.module.css";
import { useState } from 'react';
import * as XLSX from 'xlsx';

export default function IndexPage() {
  const [tableData, setTableData] = useState([]);

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

    const reader = new FileReader();
    reader.onload = (evt) => {
      const bstr = evt.target.result;
      const wb = XLSX.read(bstr, { type: 'binary' });
      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];
      // 转换为数组格式
      const data = XLSX.utils.sheet_to_json(ws, { header: 1 });
      // 跳过表头行
      setTableData(data.slice(1));
    };
    reader.readAsBinaryString(file);
  };

  return (
    <div>
      <input type="file" accept=".xlsx, .xls" onChange={handleFileUpload} />
      <table className={styles.table}>
        <thead>
          <tr>
            <th>Pair</th>
            <th>Win / Loss in %</th>
          </tr>
        </thead>
        <tbody>
          {tableData.map((row, i) => (
            <tr key={i}>
              <td>{row[0]}</td>
              <td>{row[1]}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

注意事项 #

• 确保已经安装了xlsx包：执行npm install xlsx或者yarn add xlsx
• 如果你的Excel表头和示例不一样，调整sheet_to_json的参数或者slice的索引
• 静态文件要放在public目录，Next.js才能直接访问

内容的提问来源于Stack Exchange，提问作者为匿名用户