内容摘要：大家好，我是小弋。分享的内容是2021年顶级React PDF 库。2021 年顶级 React PDF 库今天，许多网络应用程序为其用户提供内置的PDF浏览选项。然而，选择一个并不容易，因为它们的功

大家好，年值我是得关小弋。

分享的年值内容是2021年顶级React PDF 库。

2021 年顶级 React PDF 库

今天，得关许多网络应用程序为其用户提供内置的年值PDF浏览选项。然而，得关选择一个并不容易，年值因为它们的得关功能远远超过显示PDF。

因此，年值在这篇文章中，得关我将评估5个React的年值PDF浏览器库，并进行功能比较，得关以帮助你选择最适合你要求的年值。

主要介绍下面5个库：

react-pdf/renderer react-pdf @phuocng/react-pdf-viewer react-file-viewer @mikecousins/react-pdf

react-pdf/renderer

 

react-pdf/renderer

专门用于渲染和创建PDF。得关

React-pdf/renderer是年值一个广泛使用的库，用于在浏览器和服务器上创建PDF文件。

地址：https://www.npmjs.com/package/@react-pdf/renderer

这个库提供了一些基本的组件来开始工作，随着你的熟悉，你可以定制它们来提出更吸引人的设计:

Document: 这是match一个PDF文件的根。 Page: 单页是源码库由这个标签描述的。它需要有一定的尺寸(如A4)。 View: 一个通用的容器，用于样式和格式化PDF。你可以使用StyleSheet.create() API，用Flexbox和CSS属性的全部功能来设计你的视图，以布局PDF，类似于它在React Native中的使用方式。 Text: 用于显示文本。 Image: 可用于在PDF文档中插入图片。 Link: 可用于生成超链接注释。

另外，React-pdf/renderer带有一些惊人的功能，可以用来生成令人惊叹的文档。我可以很容易地列出其中的一些功能:

支持各种样式和CSS属性。 通过usePDF hook API对文档进行更多控制。 提供一个Node API。 快速和高效。 高度可定制&易于使用。

除了这些，React-pdf/renderer库每周有大约93,000次下载，GitHub上有超过9.3k颗星星。

你可以使用npm install - save @react-pdf/renderer命令轻松地将这个库安装到你的项目中，香港云服务器下面的代码显示了一个使用React-pdf/renderer的简单例子。

import React from react; import {  Document, Page, Text, View, StyleSheet } from @react-pdf/renderer; // Create styles const styles = StyleSheet.create({    page: {      flexDirection: row,     backgroundColor: #C0C0C0   },   section: {      margin: 10,     padding: 10,     flexGrow: 1   } }); // Create Pdf Component const MyPdf = () => (   <Document>     <Page size="A4" style={ styles.page}>       <View style={ styles.section}>         <Text>Heading #1</Text>       </View>       <View style={ styles.section}>         <Text>Heading #2</Text>       </View>     </Page>   </Document> ); 

react-pdf

像显示图片一样显示PDF。

我们之前讨论过的React-pdf/renderer是专门用于创建PDF的。但如果你正在寻找一个只显示PDF的库，React-pdf是最佳选择。

地址：https://www.npmjs.com/package/react-pdf

React-pdf提供了一个React组件API，允许打开PDF文件并使用PDF.js渲染。虽然这是一个专门用于查看PDF的简单库，但它有一些惊人的功能，比如:

易于使用 - 插入Document组件并给它一个文件道具。React-pdf会把它整理出来，不管它是一个URL，一个文件，还是base64。 支持自定义事件。 多种渲染方法。 支持文本选择和注释。 跨浏览器兼容性。 可访问性 - React-pdf不仅将PDF渲染成图像。还可以作为屏幕阅读器可以掌握的可见文本层，云服务器提供商使你的内容对视力障碍者来说更可用。 免费和开源。

除此以外，每周有超过296,000次的下载和4.6K颗GitHub星，这表明这个库在React社区是多么受欢迎。

你可以使用npm i react-pdf命令来安装它，下面的例子显示了React-pdf的基本用法。

import React, {  useState } from react; import {  Document, Page } from react-pdf; function MyPdf() {    const [numPages, setNumPages] = useState(null);   const [pageNumber, setPageNumber] = useState(1);   function onDocumentLoadSuccess({  numPages }) {      setNumPages(numPages);   }   return (     <div>       <Document         file="myfile.pdf"         onLoadSuccess={ onDocumentLoadSuccess}       >         <Page pageNumber={ pageNumber} />       </Document>       <p>Page { pageNumber} of { numPages}</p>     </div>   ); } export default MyPdf; 

@phuocng/react-pdf-viewer

 

@phuocng/react-pdf-viewer

React-pdf-viewer是一个完全由React钩子驱动的React组件，用TypeScript编写。

尽管是新的，React-pdf-viewer有一些令人兴奋的功能，让你为之倾倒。为了更好地理解，我将把它们列举如下：

支持受密码保护的文件。 缩放：支持自定义级别，如实际尺寸、页面合适和页面宽度。 页面之间的导航。 搜索文本。 预览页面缩略图。 查看和浏览目录。 列出和下载附件。 旋转和许多滚动模式。文本选择和手动工具模式。 全屏模式。 可以打开本地文件(例如，拖放一个本地文件来查看它。 下载文件和打印。 查看文件属性。 支持SSR。

另外，它的插件集合是完全可定制的，并以优秀的文档帮助用户。

文档：https://react-pdf-viewer.dev/docs/

从它首次发布到现在只有一年时间，它已经有超过2000次的每周下载和519颗GitHub星。

注意：你需要有React 16.8以上版本和TypeScript 3.8以上版本才能使用React-pdf-viewer。

你可以使用npm i @phuocng/react-pdf-viewer命令来安装它，下面的例子展示了React-pdf-viewer的基本用法。

// Core viewer import {  Viewer } from @react-pdf-viewer/core; // Plugins import {  defaultLayoutPlugin } from @react-pdf-viewer/default-layout; // Import styles import @react-pdf-viewer/core/lib/styles/index.css; import @react-pdf-viewer/default-layout/lib/styles/index.css; // Create new plugin instance const defaultLayoutPluginInstance = defaultLayoutPlugin(); <Viewer     fileUrl=/my Documents/sample_doc.pdf     plugins={ [         // Register plugins         defaultLayoutPluginInstance,         ...     ]} /> 

react-file-viewer

React-file-viewer是一个可扩展的文件查看器，用于Web应用程序，支持PDF、图片、csv、xslx和docx。

这个库提供了一个名为FileViewer的组件，用来显示内容，它接受几个props:

fileType String: 要显示的资源类型。如果你使用一个不支持的文件类型，将出现一个不支持的文件类型通知。 filePath String: FileViewer将显示的资源的URL。 onError Function [optional]:如果文件查看器无法获取或呈现所请求的资源，该函数将被调用。在这里你可以指定一个日志工具的回调。 errorComponent react element [optional]: 一个在发生错误时渲染的组件，而不是 react-file-viewer 默认的错误组件。 unsupported Component react element [Optional]:在文件格式不被支持的情况下要呈现的组件。

除此以外，它还有一些特殊的功能，比如:

用Jest或Enzyme进行测试。 通过使用make lint运行linter，在我们运行代码之前发现错误，从而节省时间。 可扩展性--添加支持的文件类型很容易。

此外，这也是最受欢迎的pdf查看器库之一，每周有17348次下载和291个GitHub Stars。

注意：这个库在React 16以上版本中功能良好。如果你使用React< 16版本，你很可能需要安装React-file-viewer 0.5版本。

React-file-viewer可以用npm i react-file-viewer命令安装，下面的例子显示了React-file-viewer的一个简单例子:

// MyApp.js import React, {  Component } from react; import logger from logging-library; import FileViewer from react-file-viewer; import {  CustomErrorComponent } from custom-error; const file = http://mysite.com/sampledoc.pdf const type = pdf class MyDocComponent extends Component {    render() {      return (       <FileViewer         fileType={ type}         filePath={ file}         errorComponent={ CustomErrorComponent}         onError={ this.onError}/>     );   }   onError(e) {      logger.logError(e, error in file-viewer);   } } 

@mikecousins/react-pdf

@mikecousins/react-pdf是一个使用PDF.js来渲染PDF文档的组件。

这个库使用一个叫做usePdf的Hook来渲染PDF，我们需要用这个Hook传递几个props:

file:PDF文件的URL。 Page: 表示你要显示的页面。默认=1。 scal：允许你对PDF进行缩放。默认=1。 onDocumentLoadSuccess：你可以定义一个回调函数，在PDF文档数据被完全加载后被调用。 onDocumentLoadFail：让你定义一个回调函数，当发生PDF文档数据加载错误时被调用。 onPageLoadSuccess：让你定义一个回调，它将在PDF页面数据加载完毕后被调用。 onPageRenderSuccess：让你定义一个回调，在PDF页面被完全渲染到DOM后执行。

如果你认为这工作太多，你可以简单地直接使用Pdfcomponent，它在内部利用usePdf钩子。

import React, {  useState } from react; import Pdf from @mikecousins/react-pdf; const MyPdfViewer = () => {    const [page, setPage] = useState(1);   return <Pdf file="sampledoc.pdf" page={ page} />; }; 

npm软件包@mikecousins/react-pdf-js每周有2,646次下载，有497颗GitHub星。

你可以简单地用yarn add @mikecousins/react-pdf或npm install @mikecousins/react-pdf来安装@mikecousins/react-pdf。

小结

我们来看看他们具体的下载量：

Source: https://www.npmtrends.com/

Source: https://www.npmtrends.com/

在分析了功能、流行度、安全问题和社区支持之后，我认为pdf查看器库的最佳选择是React-pdf。

考虑到发布版本的模式、软件库活动和其他相关数据，React-pdf的维护状况远远领先于其他所有库。

不过，库的选择可以根据你的要求来改变。我想这篇文章一定会帮助你更多地了解这些库。