使用 React PDF 构建 React.js PDF 查看器的指南

原创

Youna

发布于 2025-05-20 16:05:08

26800

代码可运行

运行总次数：0

代码可运行

在本文中，我们将重点介绍在React.js中制作 PDF 查看器的最受欢迎的开源库。具体来说，我们将利用著名的开源库react-pdf的功能，指导您完成创建 React.js PDF 查看器的过程。

通过本教程，您将在第一部分学习如何使用 React-PDF 在 React.js 应用程序中实现功能齐全的 PDF 查看器。在第二部分中，我们将重点介绍如何集成ComPDFKit以提供更多 PDF 功能，从而进一步增强用户的文档处理体验。

开源 React.js PDF 查看器库

在 React.js 开发中，各种开源库，尤其是非常流行的react-pdf和 @react-pdf/renderer，为 PDF 查看提供了便利。@react-pdf/renderer 在 npm 上的每周下载量高达 5.4 万次，而 React-PDF 在 npm 上的每周下载量也高达 100 万次。在这篇博文中，我们将重点介绍如何使用 React-PDF 构建一个免费的 PDF 查看器。

使用 React-PDF 构建 React.js PDF 查看器

要求：

- Node.js 版本 14 或更高版本。

-包管理器与 npm 兼容。本指南包含Yarn和npm 客户端（默认随 Node.js 安装）的使用示例。请确保 npm 版本为 5.6 或更高版本。

创建项目

1.首先使用 create-react-app 创建一个 React.js 项目：

npx create-react-app react-pdf-example

2. 项目创建完成后，将目录更改为项目文件夹：

cd react-pdf-example

添加 react-pdf

1. 安装并添加 React PDF 库：从 React 应用程序位置的终端运行以下命令来拉下所有必要的组件。

npm i react-pdf

2. 然后，按照下面的代码在”src/components/Webviewer.js”中创建一个Webviewer 。

import { useState } from "react"
import { Document, Page, pdfjs } from "react-pdf"
import "react-pdf/dist/esm/Page/AnnotationLayer.css"
import 'react-pdf/dist/Page/TextLayer.css';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

export default function PDFViewer(props) {
  const [numPages, setNumPages] = useState();
  const [pageNumber, setPageNumber] = useState(1);

  function prevPage() {
    setPageNumber(pageNumber - 1 <= 1 ? 1 : pageNumber - 1);
  }

  function nextPage() {
    setPageNumber(pageNumber + 1 >= numPages ? numPages : pageNumber + 1);
  }

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

  return (
    <div>
      <nav>
        <button onClick={prevPage}>Previous Page</button>
        <button onClick={nextPage}>Next Page</button>
      </nav>
      <div className="pages">{pageNumber} of {numPages}</div>
      <div className="page">
        <Document
          file='ComPDFKit_Sample_File_Web.pdf'
          onLoadSuccess={onLoadSuccess}
          renderMode="canvas"
        >
          <Page
            key={pageNumber}
            pageNumber={pageNumber}
          />
        </Document>
      </div>
    </div>
  )
}

显示 PDF

通过运行以下命令在终端中运行 React App 中的 PDF 查看器，PDF 成功显示：

npm start

使用 React-PDF 的局限性

尽管 React-PDF 是一个出色的开源项目，但它也有其局限性：

缺乏内置用户界面： React-PDF 没有预置的用户界面。如果您需要一个界面来帮助用户浏览 PDF 文件，则需要从头构建。

文本选择不完整： React-PDF 中的文本选择功能尚未完全优化，导致在尝试突出显示 PDF 文档中的文本时用户体验不佳。

性能挑战：渲染大型 PDF 文件或多页文档可能会影响 React-PDF 的性能，尤其是在资源有限的环境中。

如果您想在您的项目中集成更多 PDF 功能并改善用户体验，请继续阅读我们的第二种方法：使用 ComPDFKit 部署您的 PDF 查看器！

使用ComPDFKit构建 React.js PDF 查看器

此外，ComPDF还提供ComPDFKit for Web，它可以轻松集成到您的项目中，通过添加您想要的任何功能来提高您的熟练程度并简化您的工作流程，例如：

PDF 页面处理。
PDF 编辑。
PDF 评论和回复。
签署 PDF 文档。
比较 PDF 版本。
填表。
敏感信息编辑。

在这里，我们将逐步提供关于如何将 ComPDFKit for Web 无缝集成到您的 React 项目中的详细指南。

点击查看视频指南：使用 ComPDFKit PDF SDK 构建 React PDF 查看器

创建新的 React 项目

1. 使用 create-react-app 搭建一个简单的 React 应用程序：

npx create-react-app compdfkit-react-example

2. 切换到创建的项目目录：

cd compdfkit-react-example

将 ComPDFKit for Web 添加到您的项目中

1. 将“@compdfkit”文件夹导入到项目的根目录。

2. 通过调用ComPDFKitViewer.init()在您的项目中初始化 ComPDFKit for Web 。

显示 PDF

将您想要显示的 PDF 地址和您的许可证密钥传递到init 函数中。

import ComPDFKitViewer from "/@compdfkit/webviewer";

export default function Home() {
  let init = false
  const viewer = useRef(null);
  let docViewer = null
  useEffect(() => {
    if (init) return
    init = true

    ComPDFKitViewer.init({
      pdfUrl: 'Your PDF Url',
      license: 'Input your license here'
    }, viewer.current).then((core) => {
      docViewer = core.docViewer
    })
  });

  return (