在React应用中实现PDF、Word和Excel文件的预览功能，可以使用一些现有的库和工具来简化这一过程。以下是如何实现这些功能的步骤和所需的库：

孤寂无情
1,417 阅读3分钟

在React应用中实现PDF、Word和Excel文件的预览功能，可以使用一些现有的库和工具来简化这一过程。以下是如何实现这些功能的步骤和所需的库：

1. PDF文件预览

可以使用pdfjs-dist库来渲染PDF文件。

安装依赖

npm install pdfjs-dist

使用示例

import React, { useEffect, useRef } from 'react';
import pdfjsLib from 'pdfjs-dist/build/pdf';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

const PDFPreview = ({ file }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const loadPDF = async () => {
      const loadingTask = pdfjsLib.getDocument(URL.createObjectURL(file));
      const pdf = await loadingTask.promise;
      const page = await pdf.getPage(1);
      const viewport = page.getViewport({ scale: 1.5 });
      const canvas = canvasRef.current;
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      page.render({ canvasContext: context, viewport: viewport });
    };

    if (file) {
      loadPDF();
    }
  }, [file]);

  return <canvas ref={canvasRef}></canvas>;
};

export default PDFPreview;

2. Word文件预览

可以使用react-doc-viewer库来渲染Word文件。

安装依赖

npm install react-doc-viewer

使用示例

import React from 'react';
import DocViewer, { DocViewerRenderers } from 'react-doc-viewer';

const WordPreview = ({ file }) => {
  const docs = [{ uri: URL.createObjectURL(file) }];

  return <DocViewer documents={docs} pluginRenderers={DocViewerRenderers} />;
};

export default WordPreview;

3. Excel文件预览

可以使用react-excel-renderer库来渲染Excel文件。

安装依赖

npm install react-excel-renderer

使用示例

import React, { useState } from 'react';
import { ExcelRenderer } from 'react-excel-renderer';

const ExcelPreview = ({ file }) => {
  const [rows, setRows] = useState([]);
  const [cols, setCols] = useState([]);

  const handleFile = (file) => {
    ExcelRenderer(file, (err, resp) => {
      if (err) {
        console.error(err);
      } else {
        setCols(resp.cols);
        setRows(resp.rows);
      }
    });
  };

  useEffect(() => {
    if (file) {
      handleFile(file);
    }
  }, [file]);

  return (
    <div>
      <table>
        <thead>
          <tr>
            {cols.map((col, index) => (
              <th key={index}>{col.name}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, rowIndex) => (
            <tr key={rowIndex}>
              {row.map((cell, cellIndex) => (
                <td key={cellIndex}>{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default ExcelPreview;

文件上传和预览组合

可以创建一个组件来上传文件并根据文件类型展示相应的预览：

import React, { useState } from 'react';
import PDFPreview from './PDFPreview';
import WordPreview from './WordPreview';
import ExcelPreview from './ExcelPreview';

const FileUploader = () => {
  const [file, setFile] = useState(null);
  const [fileType, setFileType] = useState('');

  const handleFileChange = (event) => {
    const uploadedFile = event.target.files[0];
    setFile(uploadedFile);
    const fileType = uploadedFile.type;
    if (fileType.includes('pdf')) {
      setFileType('pdf');
    } else if (fileType.includes('word') || fileType.includes('officedocument.wordprocessingml.document')) {
      setFileType('word');
    } else if (fileType.includes('excel') || fileType.includes('spreadsheetml.sheet')) {
      setFileType('excel');
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {file && fileType === 'pdf' && <PDFPreview file={file} />}
      {file && fileType === 'word' && <WordPreview file={file} />}
      {file && fileType === 'excel' && <ExcelPreview file={file} />}
    </div>
  );
};

export default FileUploader;

这个组件允许用户上传文件，并根据文件类型渲染相应的预览组件。根据需要，可以进一步调整样式和功能。

pdf方案

在 React 项目中实现 PDF 在线预览功能，可以使用微软提供的 Office 文件查看器或者其他第三方库。以下是一些方法和步骤：

1. 使用 Microsoft Office 文件查看器（OneDrive Embed）

微软提供了通过 OneDrive 嵌入文件查看器的功能，可以嵌入到 React 应用中。

步骤：

  1. 上传 PDF 到 OneDrive：

    • 将你的 PDF 文件上传到 OneDrive。

  2. 获取嵌入链接：

    • 在 OneDrive 中找到你的 PDF 文件，右键点击选择“嵌入”。
    • 获取嵌入链接。

  3. 在 React 项目中嵌入查看器：

    • 在你的 React 项目中使用 iframe 标签嵌入 PDF 文件。
import React from 'react';

const PdfViewer = ({ embedUrl }) => {
  return (
    <iframe
      src={embedUrl}
      width="100%"
      height="600px"
      frameBorder="0"
      allowFullScreen
    ></iframe>
  );
};

export default PdfViewer;

// 在你的组件中使用 PdfViewer
import React from 'react';
import PdfViewer from './PdfViewer';

const App = () => {
  const embedUrl = "YOUR_ONEDRIVE_EMBED_LINK";

  return (
    <div>
      <h1>PDF Viewer</h1>
      <PdfViewer embedUrl={embedUrl} />
    </div>
  );
};

export default App;

2. 使用第三方库 react-pdf

react-pdf 是一个流行的用于在 React 中渲染 PDF 文件的库。

安装：

npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout

使用示例：

import React from 'react';
import { Worker, Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

const PdfViewer = ({ pdfUrl }) => {
  return (
    <div style={{ height: '600px' }}>
      <Worker workerUrl={`https://unpkg.com/pdfjs-dist@2.9.359/build/pdf.worker.min.js`}>
        <Viewer fileUrl={pdfUrl} />
      </Worker>
    </div>
  );
};

export default PdfViewer;

// 在你的组件中使用 PdfViewer
import React from 'react';
import PdfViewer from './PdfViewer';

const App = () => {
  const pdfUrl = "YOUR_PDF_URL";

  return (
    <div>
      <h1>PDF Viewer</h1>
      <PdfViewer pdfUrl={pdfUrl} />
    </div>
  );
};

export default App;

3. 使用 pdf-viewer-reactjs

另一个简单的选择是使用 pdf-viewer-reactjs 库。

安装：

npm install pdf-viewer-reactjs

使用示例：

import React from 'react';
import PDFViewer from 'pdf-viewer-reactjs';

const PdfViewer = ({ pdfUrl }) => {
  return (
    <PDFViewer
      document={{
        url: pdfUrl,
      }}
    />
  );
};

export default PdfViewer;

// 在你的组件中使用 PdfViewer
import React from 'react';
import PdfViewer from './PdfViewer';

const App = () => {
  const pdfUrl = "YOUR_PDF_URL";

  return (
    <div>
      <h1>PDF Viewer</h1>
      <PdfViewer pdfUrl={pdfUrl} />
    </div>
  );
};

export default App;

总结

这几种方法都可以帮助你在 React 项目中实现 PDF 在线预览功能。你可以根据你的具体需求和项目情况选择最适合的方案。

avatar
文章
阅读
粉丝