背景

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

<object data={this.state.pdfContent}
         type="application/pdf"
         width="100%"
         height="1200px"
         standby="pdf文档加载中..."
>
         This browser does not support PDFs.
</object>

其效果图如下：

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

pdf示例.gif

react-pdf

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

npm i react-pdf

然后在组件中引用：

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

最后在组件render函数中引入

<Document
      file={this.state.pdfContent}//文档地址
      loading=""
      onLoadSuccess={this.onDocumentLoadSuccess}
>
      <Page 
          key={this.state.currentPage} 
          pageNumber={this.state.currentPage} //当前页页码
          width={850}
       />
</Document>

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

onDocumentLoadSuccess = ({ numPages }) => {//numPages是总页数
        this.setState({ numPages });
};

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

react-pdf的具体文档链接：www.npmjs.com/package/rea…

「react-pdf」在react中预览pdf

背景

react-pdf