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文件縮放的比例等，所以如果需要滿足更多需求記得去看文檔！