釋出一個react元件——react-read-pdf，用於在移動端展示PDF檔案

摘要： PC端的瀏覽器對於PDF檔案的展示沒有太大的問題，給定一個PDF的連結，就可以用瀏覽器預設的展示樣式來展示和渲染PDF檔案的內容。比如一個" www.baidu.com/test/pdf "。 如何在移動端展示這個檔案。為了在移動端展示和渲染PDF檔案的內容，本文在pdfjs...

PC端的瀏覽器對於PDF檔案的展示沒有太大的問題，給定一個PDF的連結，就可以用瀏覽器預設的展示樣式來展示和渲染PDF檔案的內容。比如一個" ofollow,noindex">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 .

:seedling: PDFReader

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

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

PDFReader元件中的屬性

屬性名稱	型別	描述
url	字串或者物件	如果是字串，那麼url表示的是PDF檔案的絕對或者相對地址，如果是物件，可以看關於物件屬性的具體描述- >
data	字串	用二進位制來描述的PDF檔案,在javascript中，我們可以通過“atob”,將base64編碼的PDF檔案，轉化為二進位制編碼的檔案。
page	數字	預設值為1，表示應該渲染PDF檔案的第幾頁
scale	數字	決定渲染的過程中視口的大小
width	數字	決定渲染過程中，視口的寬度
showAllPage	布林值	預設是false,表示不會一次性渲染，只會渲染page的值所指定的那一頁。如果這個值為true，則一次性渲染PDF檔案所有的頁
onDocumentComplete	函式	將PDF檔案載入後，可以通過這個函式輸出PDF檔案的詳細資訊。這個函式的具體資訊如下所示。

** PDFReader **元件的url屬性

型別:

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

屬性:

屬性名	型別	描述
url	字串	字串，表示PDF檔案的絕對或者相對地址
withCredentials	布林值	決定請求是否攜帶cookie

** PDFReader **的onDocumentComplete屬性

Type:

• function(totalPage)

onDocumentComplete的型別是一個函式, 這個函式的第一個引數表示的是PDF檔案的總頁數。

注意事項

PDFReader元件的url屬性可以是字串或者是物件。

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

其一是 :

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

複製程式碼

另外一種方式是 :

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

複製程式碼

:seedling: 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檔案的詳細資訊。這個函式的具體資訊如下所示。for details

** 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-modules using 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

http://localhost:8080

Production

yarn run start-prod

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.