如何在 React 中预览 PDF 文档

如果你正在开发一个需要展示 PDF 文档的 React 应用，下面的方法可以帮助你实现 PDF 文档的预览功能。

使用 React-PDF

React-PDF 是一个可以在 React 应用中渲染 PDF 文档的库。它基于 PDF.js，一个用于在浏览器中渲染 PDF 文档的 JavaScript 库。

步骤

以下是如何在 React 应用中使用 React-PDF 实现 PDF 文档预览的步骤。

1. 使用 npm 安装 React-PDF：

npm install react-pdf

2. 导入 React-PDF：

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

3. 在组件中使用 Document 和 Page 组件：

function App() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document file="example.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>Page {pageNumber} of {numPages}</p>
    </div>
  );
}

4. 修改页码：

<button onClick={() => setPageNumber(pageNumber - 1)} disabled={pageNumber <= 1}>
  Previous Page
</button>
<button onClick={() => setPageNumber(pageNumber + 1)} disabled={pageNumber >= numPages}>
  Next Page
</button>

使用 PDF.js Express

PDF.js Express 是一个基于 PDF.js 的商业 PDF 文档查看器。它提供了许多 PDF 文档的渲染和处理功能，如打印、批注和注释等。

步骤

以下是如何在 React 应用中使用 PDF.js Express 实现 PDF 文档预览的步骤。

1. 下载 PDF.js Express Viewer：

从 PDF.js Express 官网下载压缩包。将页面渲染文件夹（lib）复制到您的 React 应用的 public 文件夹中。

2. 在 React 组件中嵌入 PDF.js Express Viewer：

function App() {
  const viewer = useRef(null);

  useEffect(() => {
    const viewerOptions = {
      libPath: 'lib',
      workerPath: 'lib/core/worker.js',
      pdfPath: 'example.pdf',
    };
    const viewerInstance = new PDFTron.WebViewer(viewer.current, viewerOptions);
    return () => viewerInstance.closeDocument();
  }, []);

  return (
    <div ref={viewer} className="pdf-viewer"></div>
  );
}

3. 样式设置：

.pdf-viewer {
  width: 100%;
  height: calc(100vh - 50px);
}

使用 Mozilla PDF.js

Mozilla PDF.js 是一款用于在浏览器中渲染 PDF 文档的 JavaScript 库。

步骤

以下是如何在 React 应用中使用 Mozilla PDF.js 实现 PDF 文档预览的步骤。

1. 安装 pdf.js 和 pdfjs-dist：

npm install pdf.js --save
npm install pdfjs-dist --save

2. 导入 pdfjs-dist：

import pdfjs from 'pdfjs-dist';

3. 在组件中使用 pdfjs：

function App() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);
  const [pdf, setPdf] = useState(null);

  useEffect(() => {
    const fetchPDF = async () => {
      const response = await fetch('example.pdf');
      const buffer = await response.arrayBuffer();
      const pdf = await pdfjs.getDocument(buffer).promise;
      setPdf(pdf);
      setNumPages(pdf.numPages);
    };
    fetchPDF();
  }, []);

  const handlePreviousPage = () => {
    setPageNumber(Math.max(1, pageNumber - 1));
  };

  const handleNextPage = () => {
    setPageNumber(Math.min(pageNumber + 1, numPages));
  };

  return (
    <div>
      {pdf && (
        <>
          <canvas ref={canvasRef} />
          <p>
            Page {pageNumber} of {numPages}
          </p>
          <button onClick={handlePreviousPage} disabled={pageNumber === 1}>
            Previous Page
          </button>
          <button onClick={handleNextPage} disabled={pageNumber === numPages}>
            Next Page
          </button>
        </>
      )}
    </div>
  );
}

以上就是在 React 应用中预览 PDF 文档的三种方法。无论你使用哪种，你都可以很容易地实现 PDF 文档的预览和操作。