2021年值得关注的React PDF 库

 
 
 
 
  
  
  
  
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 = () => ( 
  
  
  
  
   
  
  
  
  
     
  
  
  
  
       
  
  
  
  
        Heading #1 
  
  
  
  
       
  
  
  
  
       
  
  
  
  
        Heading #2 
  
  
  
  
       
  
  
  
  
     
  
  
  
  
   
  
  
  
  
); 
 
 
 

 
 
 
 
  
  
  
  
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 ( 
  
  
  
  
    
 
  
  
  
  
        
  
  
  
        file="myfile.pdf" 
  
  
  
  
        onLoadSuccess={onDocumentLoadSuccess} 
  
  
  
  
      > 
  
  
  
  
         
  
  
  
  
       
  
  
  
  
      
Page {pageNumber} of {numPages}
 
  
  
  
  
    

@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(); 
  
  
  
  
 
  
  
  
  
  
  
  
  
    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 ( 
  
  
  
  
        
  
  
  
        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 ; 
  
  
  
  
}; 
 
 
 

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

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

分享文章：2021年值得关注的React PDF 库
文章出自：http://www.csdahua.cn/qtweb/news3/382003.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网