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

yuxiaoliang發表於2018-10-25
React元件

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元件——react-read-pdf，用於在移動端展示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的值。

開發者選項

安裝

  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.

相關文章