react顯示pdf文件 一次性顯示所有頁

背景

接到一個需求，需要頁面同時展示多個PDF文件並且需要可以同時滾動。

一開始想到用iframe渲染PDf，但是考慮到用iframe渲染PDF文件不好控制，然后開始在網上找到兩個渲染PDF的庫

react-pdf-js 點擊進入官方文檔
react-pdf 點擊進入官方文檔

對比兩個庫后發現react-pdf用戶量更大，文檔更為清晰，功能也比較全面，所以選用了react-pdf。

安裝

注意：使用之前要根據自己項目的react版本去下載對應的react-pdf版本，通過npm默認安裝最新版本的react-pdf，React版本需要≥16.3，需要查找對應版本，點擊進入react-pdf官網進行查看

• 安裝react-pdf包

npm install react-pdf --save

• 引入組件及使用

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css' // 加入這個css可以顯示pdf中的批注以及連接

class MyApp extends Component {
  state = {
    numPages: null,
    pageNumber: 1,
  }

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  }

  render() {
    const { pageNumber, numPages } = this.state;

    return (
      <div>
        <Document
          file="一個PDF的連接.pdf"
          onLoadSuccess={this.onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
        </Document>
        <p>Page {pageNumber} of {numPages}</p>
      </div>
    );
  }
}

顯示方式

翻頁

想控制翻頁的話只要動態改變pageNumber就好了

一屏幕顯示

可以根據onLoadSuccess獲取總頁數，然后根據總頁數循環生成Page組件，就可以一屏幕顯示所有頁面了

render() {
    const { pageNumber, numPages } = this.state;

    return (
        <div>
            <Document file="一個PDF的連接.pdf"  onLoadSuccess={this.onDocumentLoadSuccess }>
                    {
                        new Array(numPages).fill('').map((item, index) => {
                            return <Page key={index} pageNumber={index} />
                        })
                    }
            </Document>
         </div>
    );
}

結語

react-pdf有很多api，比如說加載中和加載失敗時顯示的提示、pdf文件縮放的比例等，所以如果需要滿足更多需求記得去看文檔！