2021年值得關(guān)注的React PDF 庫(kù)

 
 
 
 
  
  
  
  
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是一個(gè)完全由React鉤子驅(qū)動(dòng)的React組件，用TypeScript編寫。

盡管是新的，React-pdf-viewer有一些令人興奮的功能，讓你為之傾倒。為了更好地理解，我將把它們列舉如下：

• 支持受密碼保護(hù)的文件。
• 縮放：支持自定義級(jí)別，如實(shí)際尺寸、頁(yè)面合適和頁(yè)面寬度。
• 頁(yè)面之間的導(dǎo)航。
• 搜索文本。
• 預(yù)覽頁(yè)面縮略圖。
• 查看和瀏覽目錄。
• 列出和下載附件。
• 旋轉(zhuǎn)和許多滾動(dòng)模式。文本選擇和手動(dòng)工具模式。
• 全屏模式。
• 可以打開本地文件(例如，拖放一個(gè)本地文件來(lái)查看它。
• 下載文件和打印。
• 查看文件屬性。
• 支持SSR。

另外，它的插件集合是完全可定制的，并以優(yōu)秀的文檔幫助用戶。

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

從它首次發(fā)布到現(xiàn)在只有一年時(shí)間，它已經(jīng)有超過2000次的每周下載和519顆GitHub星。

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

你可以使用npm i @phuocng/react-pdf-viewer命令來(lái)安裝它，下面的例子展示了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是一個(gè)可擴(kuò)展的文件查看器，用于Web應(yīng)用程序，支持PDF、圖片、csv、xslx和docx。

這個(gè)庫(kù)提供了一個(gè)名為FileViewer的組件，用來(lái)顯示內(nèi)容，它接受幾個(gè)props:

• fileType String: 要顯示的資源類型。如果你使用一個(gè)不支持的文件類型，將出現(xiàn)一個(gè)不支持的文件類型通知。
• filePath String: FileViewer將顯示的資源的URL。
• onError Function [optional]:如果文件查看器無(wú)法獲取或呈現(xiàn)所請(qǐng)求的資源，該函數(shù)將被調(diào)用。在這里你可以指定一個(gè)日志工具的回調(diào)。
• errorComponent react element [optional]: 一個(gè)在發(fā)生錯(cuò)誤時(shí)渲染的組件，而不是 react-file-viewer 默認(rèn)的錯(cuò)誤組件。
• unsupported Component react element [Optional]:在文件格式不被支持的情況下要呈現(xiàn)的組件。

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

• 用Jest或Enzyme進(jìn)行測(cè)試。
• 通過使用make lint運(yùn)行l(wèi)inter，在我們運(yùn)行代碼之前發(fā)現(xiàn)錯(cuò)誤，從而節(jié)省時(shí)間。
• 可擴(kuò)展性--添加支持的文件類型很容易。

此外，這也是最受歡迎的pdf查看器庫(kù)之一，每周有17348次下載和291個(gè)GitHub Stars。

注意：這個(gè)庫(kù)在React 16以上版本中功能良好。如果你使用React< 16版本，你很可能需要安裝React-file-viewer 0.5版本。

React-file-viewer可以用npm i react-file-viewer命令安裝，下面的例子顯示了React-file-viewer的一個(gè)簡(jiǎn)單例子:

 
 
 
 
  
  
  
  
// 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是一個(gè)使用PDF.js來(lái)渲染PDF文檔的組件。

這個(gè)庫(kù)使用一個(gè)叫做usePdf的Hook來(lái)渲染PDF，我們需要用這個(gè)Hook傳遞幾個(gè)props:

• file:PDF文件的URL。
• Page: 表示你要顯示的頁(yè)面。默認(rèn)=1。
• scal：允許你對(duì)PDF進(jìn)行縮放。默認(rèn)=1。
• onDocumentLoadSuccess：你可以定義一個(gè)回調(diào)函數(shù)，在PDF文檔數(shù)據(jù)被完全加載后被調(diào)用。
• onDocumentLoadFail：讓你定義一個(gè)回調(diào)函數(shù)，當(dāng)發(fā)生PDF文檔數(shù)據(jù)加載錯(cuò)誤時(shí)被調(diào)用。
• onPageLoadSuccess：讓你定義一個(gè)回調(diào)，它將在PDF頁(yè)面數(shù)據(jù)加載完畢后被調(diào)用。
• onPageRenderSuccess：讓你定義一個(gè)回調(diào)，在PDF頁(yè)面被完全渲染到DOM后執(zhí)行。

如果你認(rèn)為這工作太多，你可以簡(jiǎn)單地直接使用Pdfcomponent，它在內(nèi)部利用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星。

你可以簡(jiǎn)單地用yarn add @mikecousins/react-pdf或npm install @mikecousins/react-pdf來(lái)安裝@mikecousins/react-pdf。

小結(jié)

我們來(lái)看看他們具體的下載量：

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

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

在分析了功能、流行度、安全問題和社區(qū)支持之后，我認(rèn)為pdf查看器庫(kù)的最佳選擇是React-pdf。

考慮到發(fā)布版本的模式、軟件庫(kù)活動(dòng)和其他相關(guān)數(shù)據(jù)，React-pdf的維護(hù)狀況遠(yuǎn)遠(yuǎn)領(lǐng)先于其他所有庫(kù)。

不過，庫(kù)的選擇可以根據(jù)你的要求來(lái)改變。我想這篇文章一定會(huì)幫助你更多地了解這些庫(kù)。