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

---

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

• 將這個react組件，以npm包的形式發佈。
• 這個組件的項目地址爲：https://github.com/forthealll...

（如果想看使用的例子，直接下載這個代碼或者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的一個例子。
<img src="https://raw.githubusercontent...; width="320">

文檔

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.