發佈一個react組件——react-read-pdf，用於在移動端展現PDF文件

---

PC端的瀏覽器對於PDF文件的展現沒有太大的問題，給定一個PDF的連接，就能夠用瀏覽器默認的展現樣式來展現和渲染PDF文件的內容。好比一個"www.baidu.com/test/pdf"。 如何在移動端展現這個文件。爲了在移動端展現和渲染PDF文件的內容，本文在pdfjs的基礎上實現了一個簡單的react組件，用於展現和渲染PDF文件。

• 將這個react組件，以npm包的形式發佈。

• 這個組件的項目地址爲：github.com/fortheallli… （若是想看使用的例子，直接下載這個代碼或者clone，而後npm install和npm start便可）

React-read-pdf

使用React16.5編寫的組件，用於在移動設備和PC端顯示和渲染PDF文件

特色

• Simple: 使用簡單方便，僅僅是一個react組件
• Mobile-friendly: 自適應多種移動端的設備，包括手機，平板和其餘的移動辦公設備

瀏覽器支持

• IE 10+
• Firefox 3.6+
• Chrome 6+
• Safari 6+
• Opera 11.5+
• iOS Safari 6.1+
• Android Browser 3+

快速開始

1. 將 react-read-pdf引入你的react項目中

(在你的項目中好比先引入react,且必須保證React的版本必須在15.0以上)

安裝react-read-pdf包

npm install --save react-read-pdf
複製代碼

在PC端建議使用PDFReader:

import React from 'react';
import { PDFReader } from 'react-read-pdf';
複製代碼

在移動端建議使用MobilePDFReader,能夠自適應各類移動設備:

import React from 'react';
import { MobilePDFReader } from 'react-read-pdf';

複製代碼

2. 引入以後，再來看簡單的使用:

import { MobilePDFReader } from 'react-read-pdf';
export default class Test extends Component{
  render(){
    return <div style={{overflow:'scroll',height:600}}> <MobilePDFReader url="http://localhost:3000/test.pdf"/> </div> } } 複製代碼

import ReactDOM from 'react-dom';
import Test from './test'
ReactDOM.render(<Test />, document.getElementById('root')); 複製代碼

react-read-pdf 自適配於各類不一樣的移動設備，包括手機、平板和其餘移動辦公設備,下圖是利用react-read-pdf在iphoneX上展現PDF的一個例子。

文檔

react-read-pdf 這個npm包主要包括了兩個不一樣類型的組件 PDFReader 和 MobilePDFReader.

🌱 PDFReader

import { PDFReader } from 'react-read-pdf'

...
<PDFReader url={"http://localhost:3000/test.pdf"} ...>
複製代碼

PDFReader組件中的屬性

屬性名稱	類型	描述
url	字符串或者對象	若是是字符串，那麼url表示的是PDF文件的絕對或者相對地址，若是是對象，能夠看關於對象屬性的具體描述- > url object type
data	字符串	用二進制來描述的PDF文件,在javascript中，咱們能夠經過「atob」,將base64編碼的PDF文件，轉化爲二進制編碼的文件。
page	數字	默認值爲1，表示應該渲染PDF文件的第幾頁
scale	數字	決定渲染的過程當中視口的大小
width	數字	決定渲染過程當中，視口的寬度
showAllPage	布爾值	默認是false,表示不會一次性渲染，只會渲染page的值所指定的那一頁。若是這個值爲true，則一次性渲染PDF文件全部的頁
onDocumentComplete	函數	將PDF文件加載後，能夠經過這個函數輸出PDF文件的詳細信息。這個函數的具體信息以下所示。 function type

url **PDFReader**組件的url屬性

類型:

• string : 字符串，表示PDF文件的絕對或者相對地址
• object : 對象，有下列的屬性

屬性:

屬性名	類型	描述
url	字符串	字符串，表示PDF文件的絕對或者相對地址
withCredentials	布爾值	決定請求是否攜帶cookie

onDocumentComplete **PDFReader**的onDocumentComplete屬性

Type:

• function(totalPage)

onDocumentComplete的類型是一個函數, 這個函數的第一個參數表示的是PDF文件的總頁數。

注意事項

PDFReader組件的url屬性能夠是字符串或者是對象。

下面兩種方式都是被容許的。

其一是 :

<MobilePDFReader url="http://localhost:3000/test.pdf"/>

複製代碼

另一種方式是 :

<MobilePDFReader url={url:"http://localhost:3000/test.pdf"}/>

複製代碼

🌱 MobilePDFReader

import { MobilePDFReader } from 'react-read-pdf'

...
<MobilePDFReader url={"http://localhost:3000/test.pdf"} ...>
複製代碼

MobilePDFReader組件中的屬性

屬性名稱	類型	描述
url	字符串	若是是字符串，那麼url表示的是PDF文件的絕對或者相對地址
page	數字	默認值爲1，表示應該渲染PDF文件的第幾頁
scale	數字或者「auto」	默認值爲「auto」,決定渲染的過程當中視口的大小，推薦設置成「auto」能夠根據移動設備自適應的適配scale
minScale	數字	默認值0.25, scale可取的最小值
maxScale	數字	默認值10, scale可取的最大值
isShowHeader	布爾值	默認值爲true，爲了生動展現，當值爲true，有默認自帶的頭部樣式。設置爲false能夠去掉這個默認的樣式。
isShowFooter	布爾值	默認值爲true，爲了生動展現，當值爲true，有默認自帶的尾部樣式。設置爲false能夠去掉這個默認的樣式。
onDocumentComplete	函數	將PDF文件加載後，能夠經過這個函數輸出PDF文件的詳細信息。這個函數的具體信息以下所示。function type for details

onDocumentComplete **MobilePDFReader**的onDocumentComplete屬性

類型: 函數

• function(totalPage,title,otherObj)

函數的參數:

參數名稱	類型	描述
totalPage	數字	表示PDF文件的總頁數
title	字符串	PDF文件的標題
otherObj	對象	PDF文件的其餘擴展或者編碼信息

注意事項

scale的默認值爲「auto」,強烈推薦將scale的值設置成「auto」，這樣能夠根據移動設備的大小自適應的改變scale的值。

開發者選項

• React (16.x)
• Webpack (4.x)
• Typescript (3.x)
• Hot Module Replacement (HMR) using React Hot Loader (4.x)
• Babel (7.x)
• Less
• React-css-modulesusing css-modules
• Jest - Testing framework for React applications
• Production build script
• Image loading/minification using Image Webpack Loader
• Typescript compiling using Typescript Loader (5.x)
• Code quality (linting) for Typescript and LESS/CSS.

安裝

1. Clone/download repo
2. yarn install (or npm install for npm)

使用

Development

yarn run start-dev

• Build app continuously (HMR enabled)
• App served @ http://localhost:8080

Production

yarn run start-prod

• Build app once (HMR disabled)
• App served @ http://localhost:3000

---

指令列表

Command	Description
yarn run start-dev	Build app continuously (HMR enabled) and serve @ http://localhost:8080
yarn run start-prod	Build app once (HMR disabled) and serve @ http://localhost:3000
yarn run build	Build app to /dist/
yarn run test	Run tests
yarn run lint	Run Typescript and SASS linter
yarn run lint:ts	Run Typescript linter
yarn run lint:sass	Run SASS linter
yarn run start	(alias of yarn run start-dev)

Note: replace yarn with npm if you use npm.