如何在React中通过URL预览Excel文件-牛翰网

在前端开发中，我们经常会遇到需要从远程 URL 加载 Excel 文件并展示数据的场景。无论是数据分析、报表展示还是动态表格生成，一个高效、易用的解决方案都能大大提升用户体验。今天，我将分享一个基于 React 的组件 ExcelPreviewFromURL，教你如何通过 URL 预览 Excel 文件，并逐步优化代码，让它更健壮、更易维护。无论你是 React 新手还是资深开发者，这篇文章都会带给你一些启发！

为什么需要从 URL 预览 Excel 文件？

想象一下：你的用户需要从服务器下载一个 Excel 文件，然后在浏览器中快速查看内容，而无需手动下载和打开。这种需求在企业应用、数据仪表盘或在线工具中非常常见。我们将使用 React、XLSX 库和 react-table 来实现这一功能，目标是：

高效加载：从 URL 获取 Excel 文件并解析。
动态展示：将数据渲染成表格，支持日期格式优化。
用户友好：提供加载状态和错误提示。

下面，我们从原始代码开始，逐步优化，并分享实现细节。

初始代码：一个简单的起点

以下是原始的 React 组件代码，用于从 URL 加载并预览 Excel 文件：

import React, { useState, useEffect } from 'react';
import * as XLSX from 'xlsx';
import { useTable } from 'react-table';
import './ExcelPreviewFromURL.less';

const ExcelPreviewFromURL = ({ fileUrl }) => {
  const [data, setData] = useState([]);
  const [columns, setColumns] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (fileUrl) {
      setLoading(true);
      fetch(fileUrl)
        .then(response => {
          if (!response.ok) throw new Error('Failed to fetch Excel file.');
          return response.arrayBuffer();
        })
        .then(data => {
          const workbook = XLSX.read(data, { type: 'array', cellDates: true });
          const sheet = workbook.Sheets[workbook.SheetNames[0]];
          const sheetData = XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false });
          const columns = sheetData[0].map((col, index) => ({
            Header: col,
            accessor: index.toString(),
          }));
          const rowData = sheetData.slice(1).map(row => {
            return row.reduce((acc, curr, colIndex) => {
              acc[colIndex.toString()] = curr;
              return acc;
            }, {});
          });
          setColumns(columns);
          setData(rowData);
          setLoading(false);
        })
        .catch(err => {
          setLoading(false);
          setError('Failed to load Excel file.');
        });
    }
  }, [fileUrl]);

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>{error}</div>;

  return (
    <div className="table-container">
      <table {...getTableProps()} className="excel-table">
        <thead>
          {headerGroups.map((headerGroup, index) => (
            <tr {...headerGroup.getHeaderGroupProps()} key={index}>
              {headerGroup.headers.map((column, index) => (
                <th key={index} {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, index) => {
            prepareRow(row);
            return (
              <tr key={index} {...row.getRowProps()}>
                {row.cells.map((cell, index) => (
                  <td key={index} {...cell.getCellProps()}>{cell.render('Cell')}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default ExcelPreviewFromURL;

这段代码已经能实现基本功能：从 URL 获取 Excel 文件，解析数据，并用 react-table 渲染成表格。但它存在一些问题，比如代码可读性不高、错误处理不够健壮、日期格式未优化等。下面，我们一步步改进它。

优化代码：从“好用”到“优雅”

1. 类型安全：引入 TypeScript 类型

原始代码中，any 类型的使用让代码缺乏类型约束，容易埋下隐患。我们可以用 TypeScript 定义清晰的类型，提升代码健壮性：

interface RowData {
  [key: string]: string | number | Date;
}

interface Column {
  Header: string;
  accessor: string;
}

const ExcelPreviewFromURL: React.FC<{ fileUrl: string }> = ({ fileUrl }) => {
  const [data, setData] = useState<RowData[]>([]);
  const [columns, setColumns] = useState<Column[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  // ...
};

这样，data、columns 和 error 的类型更明确，IDE 也能提供更好的提示。

2. 提取逻辑：分离数据解析函数

useEffect 中的逻辑过于复杂，我们可以提取一个独立的函数来处理 Excel 文件的加载和解析：

const parseExcelFromUrl = async (url: string): Promise<{ columns: Column[]; data: RowData[] }> => {
  const response = await fetch(url);
  if (!response.ok) throw new Error('Failed to fetch Excel file.');
  
  const arrayBuffer = await response.arrayBuffer();
  const workbook = XLSX.read(arrayBuffer, { type: 'array', cellDates: true });
  const sheet = workbook.Sheets[workbook.SheetNames[0]];
  const sheetData = XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false }) as string[][];

  const columns = sheetData[0].map((col, index) => ({
    Header: col,
    accessor: index.toString(),
  }));

  const rowData = sheetData.slice(1).map((row, rowIndex) =>
    row.reduce((acc, curr, colIndex) => {
      const cellRef = XLSX.utils.encode_cell({ r: rowIndex + 1, c: colIndex });
      const cell = sheet[cellRef];
      acc[colIndex.toString()] = cell?.t === 'd' ? XLSX.SSF.format('yyyy-mm-dd', cell.v) : curr;
      return acc;
    }, {} as RowData)
  );

  return { columns, data: rowData };
};

然后在 useEffect 中调用：

useEffect(() => {
  if (!fileUrl) return;

  setLoading(true);
  parseExcelFromUrl(fileUrl)
    .then(({ columns, data }) => {
      setColumns(columns);
      setData(data);
      setLoading(false);
    })
    .catch(err => {
      setError(err.message || 'Failed to load Excel file.');
      setLoading(false);
    });
}, [fileUrl]);

这样，代码结构更清晰，逻辑复用性也更高。

3. 优化日期处理：让数据更直观

原始代码中，日期处理不够完善。我们通过 XLSX.SSF.format 将日期格式化为 yyyy-mm-dd，这在解析函数中已经实现。如果需要更多格式（如 MM/DD/YYYY），可以传入一个参数来自定义。

4. 提升用户体验：加载和错误状态

简单的 <div>Loading...</div> 和 <div>{error}</div> 显得单调。我们可以用更友好的 UI 组件，比如添加加载动画或错误提示框：

if (loading) return <div className="loading-spinner">加载中，请稍候...</div>;
if (error) return <div className="error-message">出错啦：{error}</div>;

CSS 示例：

.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 16px;
}

.error-message {
  color: #d32f2f;
  padding: 10px;
  border: 1px solid #d32f2f;
  border-radius: 4px;
}

5. 性能优化：useMemo 缓存表格配置

react-table 的 useTable 每次渲染都会重新计算。我们可以用 useMemo 缓存 columns 和 data，减少不必要的计算：

const tableInstance = useTable({
  columns: useMemo(() => columns, [columns]),
  data: useMemo(() => data, [data]),
});

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;

最终代码：优雅与实用的结合

以下是优化后的完整代码：

import React, { useState, useEffect, useMemo } from 'react';
import * as XLSX from 'xlsx';
import { useTable } from 'react-table';
import './ExcelPreviewFromURL.less';

interface RowData { [key: string]: string | number | Date; }
interface Column { Header: string; accessor: string; }

const parseExcelFromUrl = async (url: string): Promise<{ columns: Column[]; data: RowData[] }> => {
  const response = await fetch(url);
  if (!response.ok) throw new Error('Failed to fetch Excel file.');
  const arrayBuffer = await response.arrayBuffer();
  const workbook = XLSX.read(arrayBuffer, { type: 'array', cellDates: true });
  const sheet = workbook.Sheets[workbook.SheetNames[0]];
  const sheetData = XLSX.utils.sheet_to_json(sheet, { header: 1, raw: false }) as string[][];

  const columns = sheetData[0].map((col, index) => ({ Header: col, accessor: index.toString() }));
  const rowData = sheetData.slice(1).map((row, rowIndex) =>
    row.reduce((acc, curr, colIndex) => {
      const cellRef = XLSX.utils.encode_cell({ r: rowIndex + 1, c: colIndex });
      const cell = sheet[cellRef];
      acc[colIndex.toString()] = cell?.t === 'd' ? XLSX.SSF.format('yyyy-mm-dd', cell.v) : curr;
      return acc;
    }, {} as RowData)
  );

  return { columns, data: rowData };
};

const ExcelPreviewFromURL: React.FC<{ fileUrl: string }> = ({ fileUrl }) => {
  const [data, setData] = useState<RowData[]>([]);
  const [columns, setColumns] = useState<Column[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!fileUrl) return;
    setLoading(true);
    parseExcelFromUrl(fileUrl)
      .then(({ columns, data }) => {
        setColumns(columns);
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message || 'Failed to load Excel file.');
        setLoading(false);
      });
  }, [fileUrl]);

  const tableInstance = useTable({
    columns: useMemo(() => columns, [columns]),
    data: useMemo(() => data, [data]),
  });

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;

  if (loading) return <div className="loading-spinner">加载中，请稍候...</div>;
  if (error) return <div className="error-message">出错啦：{error}</div>;

  return (
    <div className="table-container">
      <table {...getTableProps()} className="excel-table">
        <thead>
          {headerGroups.map((headerGroup, index) => (
            <tr {...headerGroup.getHeaderGroupProps()} key={index}>
              {headerGroup.headers.map((column, index) => (
                <th key={index} {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, index) => {
            prepareRow(row);
            return (
              <tr key={index} {...row.getRowProps()}>
                {row.cells.map((cell, index) => (
                  <td key={index} {...cell.getCellProps()}>{cell.render('Cell')}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default ExcelPreviewFromURL;