2021年值得关注的React PDF 库

开发 前端
今天,许多网络应用程序为其用户提供内置的PDF浏览选项。然而,选择一个并不容易,因为它们的功能远远超过显示PDF。在这篇文章中,我将评估5个React的PDF浏览器库,并进行功能比较,以帮助你选择最适合你要求的。

大家好,我是小弋。

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

2021 年顶级 React PDF 库

[[406442]]

今天,许多网络应用程序为其用户提供内置的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的简单例子。

  1. import React from 'react'
  2. import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'
  3.  
  4. // Create styles 
  5. const styles = StyleSheet.create({ 
  6.   page: { 
  7.     flexDirection: 'row'
  8.     backgroundColor: '#C0C0C0' 
  9.   }, 
  10.   section: { 
  11.     margin: 10, 
  12.     padding: 10, 
  13.     flexGrow: 1 
  14.   } 
  15. }); 
  16.  
  17. // Create Pdf Component 
  18. const MyPdf = () => ( 
  19.   <Document> 
  20.     <Page size="A4" style={styles.page}> 
  21.       <View style={styles.section}> 
  22.         <Text>Heading #1</Text> 
  23.       </View
  24.       <View style={styles.section}> 
  25.         <Text>Heading #2</Text> 
  26.       </View
  27.     </Page> 
  28.   </Document> 
  29. ); 

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的基本用法。

  1. import React, { useState } from 'react'
  2. import { Document, Page } from 'react-pdf'
  3.  
  4. function MyPdf() { 
  5.   const [numPages, setNumPages] = useState(null); 
  6.   const [pageNumber, setPageNumber] = useState(1); 
  7.  
  8.   function onDocumentLoadSuccess({ numPages }) { 
  9.     setNumPages(numPages); 
  10.   } 
  11.  
  12.   return ( 
  13.     <div> 
  14.       <Document 
  15.         file="myfile.pdf" 
  16.         onLoadSuccess={onDocumentLoadSuccess} 
  17.       > 
  18.         <Page pageNumber={pageNumber} /> 
  19.       </Document> 
  20.       <p>Page {pageNumber} of {numPages}</p> 
  21.     </div> 
  22.   ); 
  23. 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的基本用法。

  1. // Core viewer 
  2. import { Viewer } from '@react-pdf-viewer/core'
  3.  
  4. // Plugins 
  5. import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'
  6.  
  7. // Import styles 
  8. import '@react-pdf-viewer/core/lib/styles/index.css'
  9. import '@react-pdf-viewer/default-layout/lib/styles/index.css'
  10.  
  11. // Create new plugin instance 
  12. const defaultLayoutPluginInstance = defaultLayoutPlugin(); 
  13.  
  14. <Viewer 
  15.     fileUrl='/my Documents/sample_doc.pdf' 
  16.     plugins={[ 
  17.         // Register plugins 
  18.         defaultLayoutPluginInstance, 
  19.         ... 
  20.     ]} 
  21. /> 

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的一个简单例子:

  1. // MyApp.js 
  2. import React, { Component } from 'react'
  3. import logger from 'logging-library'
  4. import FileViewer from 'react-file-viewer'
  5. import { CustomErrorComponent } from 'custom-error'
  6.  
  7. const file = 'http://mysite.com/sampledoc.pdf' 
  8. const type = 'pdf' 
  9.  
  10. class MyDocComponent extends Component { 
  11.   render() { 
  12.     return ( 
  13.       <FileViewer 
  14.         fileType={type} 
  15.         filePath={file} 
  16.         errorComponent={CustomErrorComponent} 
  17.         onError={this.onError}/> 
  18.     ); 
  19.   } 
  20.  
  21.   onError(e) { 
  22.     logger.logError(e, 'error in file-viewer'); 
  23.   } 

@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钩子。

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

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的维护状况远远领先于其他所有库。

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

 

责任编辑:姜华 来源: TianTianUp
相关推荐

2021-07-06 12:06:40

React

2020-12-29 10:58:40

RPA机器人流程自动化人工智能

2022-08-05 09:25:27

React库JavaScript工具

2021-02-19 22:35:29

DevOps开发软件开发

2020-12-29 16:33:07

边缘计算自动化量子计算

2020-12-20 17:19:24

主机托管边缘计算远程工作

2021-02-22 10:49:45

大数据数据湖数据仓库

2021-06-16 08:00:00

存储磁盘数据中心

2021-02-17 23:45:06

大数据工具架构

2021-01-20 09:00:00

开发软件测试工具

2020-11-26 15:06:59

物联网人工智能技术

2021-02-26 20:11:54

边缘计算云计算安全

2021-04-21 10:40:43

物联网威胁物联网安全网络攻击

2021-01-11 10:55:12

混合云云计算云平台

2021-03-02 22:46:39

安全访问服务边缘SASE安全服务

2021-02-26 11:12:22

人工智能AI机器学习

2021-03-30 14:28:53

云计算

2021-02-04 11:08:18

安全趋势勒索软件攻击

2021-01-14 11:33:11

物联网应用物联网IOT

2021-04-20 12:50:24

漏洞网络安全网络攻击
点赞
收藏

51CTO技术栈公众号