如何使用React在网站中展示上传的电子表格/CSV文件

你之前用的方案失效，核心原因基本都是预设了固定表格结构、或者只适配了单一文件格式，没法兼容未知结构的用户上传文件。以下是无预定义结构依赖、全前端运行的实现方式，支持任意合规CSV、xlsx/xls格式文件的自动解析展示：

• 依赖选择：用前端通用表格解析库处理文件，自动识别格式、提取行列内容，不需要提前知道文件的表头、行数、列数
• 安装依赖：执行npm install xlsx安装解析库，yarn用户执行yarn add xlsx
• 核心逻辑：通过原生FileReader读取用户上传的本地文件，转成二进制流交给解析库自动识别格式，提取第一个工作表的内容转成二维数组，遍历生成表格即可，全程不需要后端参与，也不需要预设任何文件结构规则

可直接复用的组件代码：

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

export default function FileTableViewer() {
  const [tableHeaders, setTableHeaders] = useState([]);
  const [tableRows, setTableRows] = useState([]);

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

    const reader = new FileReader();
    reader.onload = (loadEvent) => {
      // 自动识别文件格式，无需手动判断是CSV还是Excel
      const workbook = XLSX.read(loadEvent.target.result, { type: 'array' });
      // 默认取第一个工作表的内容，需要多sheet切换可基于SheetNames扩展
      const activeSheet = workbook.Sheets[workbook.SheetNames[0]];
      // 转二维数组，不预设表头规则，完全按文件实际内容解析
      const rawData = XLSX.utils.sheet_to_json(activeSheet, { header: 1 });
      // 拆分表头和内容行
      setTableHeaders(rawData[0] || []);
      setTableRows(rawData.slice(1));
    };
    reader.readAsArrayBuffer(selectedFile);
  };

  return (
    <div className="table-viewer">
      <input 
        type="file" 
        accept=".csv,.xlsx,.xls" 
        onChange={handleFileSelect}
      />
      {tableHeaders.length > 0 && (
        <table style={{ borderCollapse: 'collapse', marginTop: '16px', width: '100%' }} border="1" cellPadding="6">
          <thead>
            <tr>
              {tableHeaders.map((header, colIndex) => (
                <th key={colIndex}>{String(header ?? '')}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {tableRows.map((row, rowIndex) => (
              <tr key={rowIndex}>
                {tableHeaders.map((_, colIndex) => (
                  <td key={colIndex}>{String(row[colIndex] ?? '')}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

关键注意点 #

• 解析时传入{ header: 1 }配置是适配任意结构文件的核心，该配置会让解析结果返回纯二维数组，不会把第一行内容硬匹配成固定字段，不管用户上传的文件有多少列、列名是什么，都能正常渲染
• 不要完全依赖文件后缀做格式校验，解析库会读取文件二进制特征识别真实格式，即使用户修改了后缀名，只要是合规的表格文件都能正常解析
• 渲染单元格时加?? ''做空值兜底，避免空单元格返回undefined导致页面报错
• 如果仅需要支持CSV格式，也可以不用第三方库，自行通过FileReader读取文本后拆分，但要注意处理CSV的转义规则（比如单元格内容自带逗号、换行、引号），自行实现容易出兼容问题，用统一解析库稳定性更高

所有解析、渲染逻辑都在用户浏览器本地完成，不需要把文件上传到服务端，加载速度快，也不会涉及用户文件内容的传输风险

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