文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

2021年值得关注的React PDF 库

2024-12-03 02:57

关注

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

2021 年顶级 React PDF 库

[[406442]]

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

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

主要介绍下面5个库:

react-pdf/renderer

 

react-pdf/renderer

专门用于渲染和创建PDF。

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

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

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

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

除了这些,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.    
  20.     size="A4" style={styles.page}> 
  21.       <View style={styles.section}> 
  22.         Heading #1 
  23.       View
  24.       <View style={styles.section}> 
  25.         Heading #2 
  26.       View
  27.      
  28.    
  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的简单库,但它有一些惊人的功能,比如:

除此以外,每周有超过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.     
     
  14.       
  15.         file="myfile.pdf" 
  16.         onLoadSuccess={onDocumentLoadSuccess} 
  17.       > 
  18.          
  19.        
  20.       

    Page {pageNumber} of {numPages}

     
  21.     
 
  •   ); 
  • export default MyPdf; 
  • @phuocng/react-pdf-viewer

     

    @phuocng/react-pdf-viewer

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

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

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

    文档: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.     fileUrl='/my Documents/sample_doc.pdf' 
    15.     plugins={[ 
    16.         // Register plugins 
    17.         defaultLayoutPluginInstance, 
    18.         ... 
    19.     ]} 
    20. /> 

    react-file-viewer

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

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

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

    此外,这也是最受欢迎的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.       
    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:

    如果你认为这工作太多,你可以简单地直接使用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 "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内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯