背景

接到一个需求，需要页面同时展示多个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文件缩放的比例等，所以如果需要满足更多需求记得去看文档！