如何在React中通過(guò)URL預(yù)覽Excel文件

更新時(shí)間：2025年03月25日 15:20:24 作者：小堯1

這篇文章主要為大家詳細(xì)介紹了如何在React中通過(guò)URL預(yù)覽Excel文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

在前端開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到需要從遠(yuǎn)程 URL 加載 Excel 文件并展示數(shù)據(jù)的場(chǎng)景。無(wú)論是數(shù)據(jù)分析、報(bào)表展示還是動(dòng)態(tài)表格生成，一個(gè)高效、易用的解決方案都能大大提升用戶(hù)體驗(yàn)。今天，我將分享一個(gè)基于 React 的組件 ExcelPreviewFromURL，教你如何通過(guò) URL 預(yù)覽 Excel 文件，并逐步優(yōu)化代碼，讓它更健壯、更易維護(hù)。無(wú)論你是 React 新手還是資深開(kāi)發(fā)者，這篇文章都會(huì)帶給你一些啟發(fā)！

為什么需要從 URL 預(yù)覽 Excel 文件？

想象一下：你的用戶(hù)需要從服務(wù)器下載一個(gè) Excel 文件，然后在瀏覽器中快速查看內(nèi)容，而無(wú)需手動(dòng)下載和打開(kāi)。這種需求在企業(yè)應(yīng)用、數(shù)據(jù)儀表盤(pán)或在線工具中非常常見(jiàn)。我們將使用 React、XLSX 庫(kù)和 react-table 來(lái)實(shí)現(xiàn)這一功能，目標(biāo)是：

高效加載：從 URL 獲取 Excel 文件并解析。
動(dòng)態(tài)展示：將數(shù)據(jù)渲染成表格，支持日期格式優(yōu)化。
用戶(hù)友好：提供加載狀態(tài)和錯(cuò)誤提示。

下面，我們從原始代碼開(kāi)始，逐步優(yōu)化，并分享實(shí)現(xiàn)細(xì)節(jié)。

初始代碼：一個(gè)簡(jiǎn)單的起點(diǎn)

以下是原始的 React 組件代碼，用于從 URL 加載并預(yù)覽 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;

這段代碼已經(jīng)能實(shí)現(xiàn)基本功能：從 URL 獲取 Excel 文件，解析數(shù)據(jù)，并用 react-table 渲染成表格。但它存在一些問(wèn)題，比如代碼可讀性不高、錯(cuò)誤處理不夠健壯、日期格式未優(yōu)化等。下面，我們一步步改進(jìn)它。

優(yōu)化代碼：從“好用”到“優(yōu)雅”

1. 類(lèi)型安全：引入 TypeScript 類(lèi)型

原始代碼中，any 類(lèi)型的使用讓代碼缺乏類(lèi)型約束，容易埋下隱患。我們可以用 TypeScript 定義清晰的類(lèi)型，提升代碼健壯性：

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 的類(lèi)型更明確，IDE 也能提供更好的提示。

2. 提取邏輯：分離數(shù)據(jù)解析函數(shù)

useEffect 中的邏輯過(guò)于復(fù)雜，我們可以提取一個(gè)獨(dú)立的函數(shù)來(lái)處理 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 中調(diào)用：

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]);

這樣，代碼結(jié)構(gòu)更清晰，邏輯復(fù)用性也更高。

3. 優(yōu)化日期處理：讓數(shù)據(jù)更直觀

原始代碼中，日期處理不夠完善。我們通過(guò) XLSX.SSF.format 將日期格式化為 yyyy-mm-dd，這在解析函數(shù)中已經(jīng)實(shí)現(xiàn)。如果需要更多格式（如 MM/DD/YYYY），可以傳入一個(gè)參數(shù)來(lái)自定義。

4. 提升用戶(hù)體驗(yàn)：加載和錯(cuò)誤狀態(tài)

簡(jiǎn)單的 <div>Loading...</div> 和 <div>{error}</div> 顯得單調(diào)。我們可以用更友好的 UI 組件，比如添加加載動(dòng)畫(huà)或錯(cuò)誤提示框：

if (loading) return <div className="loading-spinner">加載中，請(qǐng)稍候...</div>;
if (error) return <div className="error-message">出錯(cuò)啦：{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. 性能優(yōu)化：useMemo 緩存表格配置

react-table 的 useTable 每次渲染都會(huì)重新計(jì)算。我們可以用 useMemo 緩存 columns 和 data，減少不必要的計(jì)算：

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

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

最終代碼：優(yōu)雅與實(shí)用的結(jié)合

以下是優(yōu)化后的完整代碼：

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">加載中，請(qǐng)稍候...</div>;
  if (error) return <div className="error-message">出錯(cuò)啦：{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;