React 移動端項目之pdf預覽

 

     因爲項目需要，需要在在項目中實現pdf文件遇見功能，衆所周知，安卓老大哥貌似不怎麼支持，所以採用的react-pdf插件實現方式，實現方式很簡單：

一：引入react-pdf包：

    yarn add react-pdf 或者npm install react-pdf --save

二：封裝pdf組件：（官網demo）

 import React, { Component } from 'react';

import { Document, Page } from 'react-pdf';

//如果報錯 

Uncaught SyntaxError: Unexpected token <
index.js:1452 

Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".
    at pdf.js:10999

//就增加這兩句

import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

 

class MyApp extends Component {

  state = {

    numPages: null,

    pageNumber: 1,

  }

 

  onDocumentLoadSuccess = ({ numPages }) => {

    this.setState({ numPages });

  }

 

  render() {

    const { pageNumber, numPages } = this.state;

 

    return (

      <div>

        <Document

          file="somefile.pdf"

          onLoadSuccess={this.onDocumentLoadSuccess}

           page = {pageNumber}

        >

          <Page pageNumber={pageNumber} />

        </Document>

        <p>Page {pageNumber} of {numPages}</p>

      </div>

    );

  }

}

奉上官網demo地址https://www.npmjs.com/package/react-pdf

需求暫時可以實現，但是不完美的是這個插件 實現的是pdf文件分頁預覽法，以爲這不能夠常預覽，想預覽下頁，就需要自己做分頁，改變page屬性的值，後期想的解決辦法就是滾動翻頁代替點擊翻頁，雖然還是單頁預覽但是稍微比點擊翻頁好點，後期小編突發奇想，渲染多個封裝的pdf組件，每個組件只顯示一頁pdf內容，嘗試了下還是可以實現常預覽的，至於性能方面，小編的意思是在加載完第一頁之後在渲染之後的，防止一次加載同一文件多次，浪費性能