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

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

通过本教程，您将在第一部分学习如何使用 React-PDF 在 React.js 应用程序中实现功能齐全的 PDF 查看器。在第二部分中，我们将重点介绍如何集成ComPDF以提供更多 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

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

cd react-pdf-example

添加 react-pdf

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

npm i react-pdf
然后，按照下面的代码在***"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 (

<button onClick={prevPage}>Previous Page</button>
<button onClick={nextPage}>Next Page</button>

{pageNumber} of {numPages}

<Document file='ComPDFKit_Sample_File_Web.pdf' onLoadSuccess={onLoadSuccess} renderMode="canvas" >
<Page key={pageNumber} pageNumber={pageNumber} />
</Document>

)
}

显示 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 查看器

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

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

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

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

创建新的 React 项目

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

npx create-react-app compdfkit-react-example
切换到创建的项目目录：

cd compdfkit-react-example

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

将**"@compdfkit"**文件夹导入到项目的根目录。
通过调用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 (
  )
}

PDF 文件将会打开并显示。您也可以访问 ComPDFKit GitHub 账户下载React PDF 查看器示例项目，并直接运行 Web Demo。如果您在此过程中遇到任何问题，请立即联系我们!

使用 ComPDFKit 的好处

轻松集成： 开发人员可以按照ComPDF的开发文档，只需几行代码即可轻松地将这个强大的 SDK 合并到他们的应用程序中。

**功能优势：**与 React-PDF 不同，使用 ComPDFKit 部署 PDF 查看器可提供无与伦比的自定义选项，以满足特定需求。您可以使用其他 PDF 功能（例如注释、文档编辑、表单处理和数字签名）来丰富您的应用程序，从而显著提升用户体验。

卓越的支持服务： ComPDFKit 提供 24/5 在线和电子邮件支持。遇到问题时，只需联系在线客服团队，即可获得快速有效的解决方案。

全面的技术援助： ComPDFKit 提供无限的错误请求支持和远程服务，确保迅速解决任何开发挑战，从而实现顺利的开发过程。

价格优势： 为了方便项目测试，ComPDFKit 提供 30 天免费试用许可证。此外，我们还为个人开发者、中小型企业、初创企业和非营利组织等提供价格实惠的许可证。