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文件缩放的比例等,所以如果需要满足更多需求记得去看文档!

posted @ 2020-03-17 17:59  SSS小龙SSS  阅读(3427)  评论(0编辑  收藏  举报