如何使用(.xslx或.pdf) urls在react/javascript中显示(只读) xslx、pdf文件？

import React from 'react';
import XLSX from 'xlsx';
import { Document, Page } from 'react-pdf';

const ExcelComponent = ({ url }) => {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    const fetchData = async () => {
      const res = await fetch(url);
      const buffer = await res.arrayBuffer();
      const workbook = XLSX.read(buffer, { type: 'array' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      setData(jsonData);
    };

    fetchData();
  }, [url]);

  return (
    <table>
      <tbody>
        {data.map((row, index) => (
          <tr key={index}>
            {row.map((cell, index) => (
              <td key={index}>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

const PdfComponent = ({ url }) => {
  return (
    <Document file={url}>
      <Page pageNumber={1} />
    </Document>
  );
};

const App = () => {
  return (
    <div>
      <h1>Excel File</h1>
      <ExcelComponent url="your-xslx-file-url" />

      <h1>PDF File</h1>
      <PdfComponent url="your-pdf-file-url" />
    </div>
  );
};

export default App;