「react

#「react| 来源: 网络整理| 查看: 265

背景

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

This browser does not support PDFs. 复制代码

其效果图如下：

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

pdf示例.gif

react-pdf

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

npm i react-pdf 复制代码

然后在组件中引用：

import { Document, Page } from 'react-pdf'; 复制代码

最后在组件render函数中引入

复制代码

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

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

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

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

【本文地址】

公司简介

联系我们