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

• 將這個react元件，以npm包的形式釋出。

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.