antd 实现pdf 预览_react 的pdf预览插件应用

最近项目上有预览PDF文档的需求，原本使用object实现这个功能，代码如下：

type="application/pdf"

width="100%"

height="1200px"

standby="pdf文档加载中..."

>

This browser does not support PDFs.

其效果图如下：

object.gif

但是此时页面出现了两个滚动条，不是我们想要的效果，而且也存在浏览器兼容问题，因此，换用react-pdf 实现这一功能。先上一个修改好的效果图：

pdf示例.gif

使用react-pdf时，首先要安装插件：

npm i react-pdf

然后在组件中引用：

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

最后在组件render函数中引入

file={this.state.pdfContent}//文档地址

loading=""

onLoadSuccess={this.onDocumentLoadSuccess}

>

key={this.state.currentPage}

pageNumber={this.state.currentPage} //当前页页码

width={850}

/>

其中onLoadSuccess为加载完的回调函数

onDocumentLoadSuccess = ({ numPages }) => {//numPages是总页数

this.setState({ numPages });

};

注意：效果图上的分页是结合antd的Pagination来实现的。