在React中如何从Firebase Storage加载Excel文件并在网页展示数据？

目前有两种成熟的实现方案，可根据你的业务需求选择：

方案1：前端解析Excel自定义渲染（推荐，可控性最高） #

这个方案通过开源的xlsx库直接在前端解析Excel文件内容，渲染为自定义的HTML表格，不需要依赖任何外部预览服务，也不会有跳转逻辑。

实现步骤 #

• 安装依赖
  执行命令安装xlsx库：
  npm install xlsx
  如果你用yarn：
  yarn add xlsx
• 编写Excel预览组件
  组件示例代码如下：

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

const ExcelViewer = ({ excelUrl }) => {
  // 存储解析后的表头和表格数据
  const [headers, setHeaders] = useState([]);
  const [rows, setRows] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchAndParseExcel = async () => {
      try {
        setLoading(true);
        // 以arraybuffer格式获取Excel文件
        const response = await fetch(excelUrl);
        const arrayBuffer = await response.arrayBuffer();
        // 解析Excel文件
        const workbook = XLSX.read(arrayBuffer, { type: 'array' });
        // 取第一个工作表的内容，也可以根据工作表名称自定义选择
        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        // 转换为二维数组
        const data = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
        // 拆分表头和内容
        if (data.length > 0) {
          setHeaders(data[0]);
          setRows(data.slice(1));
        }
        setError('');
      } catch (err) {
        setError('Excel文件加载失败，请检查文件地址是否有效');
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    if (excelUrl) fetchAndParseExcel();
  }, [excelUrl]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>*{error}*</div>;

  return (
    <div style={{ overflowX: 'auto' }}>
      <table border={1} cellPadding={8} cellSpacing={0}>
        <thead>
          <tr>
            {headers.map((header, idx) => (
              <th key={idx}>{header}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, rowIdx) => (
            <tr key={rowIdx}>
              {row.map((cell, cellIdx) => (
                <td key={cellIdx}>{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default ExcelViewer;

• 组件调用
  你从Firebase Storage拿到下载URL后，直接传入组件即可：
  <ExcelViewer excelUrl="你的Firebase Storage Excel下载URL" />

方案2：嵌入式iframe预览（开发成本低） #

如果你不需要自定义表格的样式和交互，可以直接用iframe嵌入官方在线Excel预览接口，仅需要传入公开的Excel下载URL即可，不需要额外解析逻辑。示例代码如下：

const ExcelIframeViewer = ({ excelUrl }) => {
  // 用微软官方在线预览接口，无需额外鉴权，仅要求Excel公开可访问
  const previewUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(excelUrl)}`
  return <iframe src={previewUrl} width="100%" height="800px" frameBorder="0" />
}

注意：这个方案要求你的Excel文件是公开可访问的，且预览样式由第三方服务决定，无法自定义。

常见问题排查 #

• 跨域错误：需要进入Firebase控制台的Storage配置页，配置CORS规则，允许你的React项目域名发起GET请求。
• 解析失败：检查你拿到的下载URL是否有效，是否有访问权限，文件格式是否为标准的.xlsx/.xls格式。

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