导入react-pdf

npm i react-pdf -S

或

yarn add react-pdf

在文件中引入并使用

从react-pdf引入会有不知名错误，react-pdf/dist/esm/entry.webpack并没有。

onLoadSuccess可以获取对应加载pdf的总页数，此处用函数onDocumentLoadSuccess保存为numPages。

Page设置属性pageNumber就是对应的pdf页数，参数基于1，这里展示第一页，可以通过添加按钮修改pageNumber的值达到切换pdf页面的效果。

Document的file就是访问pdf路径，如果是本地路径也许不会有跨域问题，如果是在线pdf，开发时建议加上前缀进行proxy代理，项目上线后同样用nginx做一样的代理即可。此处代理/pdf/，将/pdf/后面请求的pdf文件转发去在线文件所在地址。

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';export default class index extends Component {state = {numPages: null,pageNumber: 1,};onDocumentLoadSuccess = ({ numPages }) => {this.setState({ numPages });};render() {const { pageNumber } = this.state;return (<div><Documentfile={'/pdf/555.pdf'}onLoadSuccess={this.onDocumentLoadSuccess}><Page width={window.screen.width} pageNumber={pageNumber} /></Document><buttononClick={() => {pageNumber > 1? this.setState({ pageNumber: pageNumber - 1 }): alert('前面没有了');}}>上一页</button><buttononClick={() => {pageNumber < numPages? this.setState({ pageNumber: pageNumber + 1 }): alert('后面没有了');}}>下一页</button></div>);}
}

代理代码示例：

  proxy:{'/pdf/': {target: 'http://xxxxxxxxx:xxxx/',changeOrigin: true,pathRewrite: { '^/pdf/': '' },},}

下拉展示

其实就是一口气遍历渲染出来，创建了一个长度为总页数numPages的数组进行map，用index做页数的请求，不过index基于0，pageNumber基于1，因此index需要+1。

示例比较粗糙，一口气展示，展示较少内容的pdf时没有什么问题，如果pdf页数过多会出现性能问题，可以自行考虑加载方法（例如每滑动十页进行下面十页的加载）。

import React, { Component } from 'react';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';export default class index extends Component {state = {numPages: null,pageNumber: 1,};onDocumentLoadSuccess = ({ numPages }) => {this.setState({ numPages });};render() {const { pageNumber, numPages } = this.state;return (<div><Documentfile={'/pdf/555.pdf'}onLoadSuccess={this.onDocumentLoadSuccess}>{new Array(numPages).fill('').map((cur, index) => (<Pagekey={index}width={window.screen.width}pageNumber={index + 1}/>))}</Document></div>);}
}

react react-pdf实现在线pdf加载（翻页加载、下拉滚动加载）相关推荐

百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...
写了一天,以下是我自己摸索出来的,暂时只做了两层地图,废话不多说,上图上代码图片: 第一层地图点击圆形覆盖物或者放大地图进入第二层地图,缩放会回到第一层拖拽地图或者缩放地图会触发可视化数据下拉 ...
html 下拉滚动加载,原生js滚动到底部加载数据和下拉刷新 Scrollload
初衷如今移动端站点越来越多,滚动到底部加载数据和下拉刷新的需求非常的常见,即使现在很多pc站点也会有这样的需求,比如百度首页就有.虽然简单的完成这么一个功能非常方便,但是滚动往往会成为性能的瓶颈,处 ...
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）
<template><div class="sg-page-body"><div class="sg-list"><v ...
怎么样给下拉框加载背景色
选择自 PPLUNCLE 的 Blog 部分代码: ------aspx页面: <tr> <td><select id="job" name=&q ...
html 微博下拉菜单,jQuery实现模仿微博下拉滚动条加载数据效果
本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果.分享给大家供大家参考,具体如下: 滚动条距离底部 $(function () { var i = 4; $(window).bind(&q ...
新增书籍类别，下拉框加载，书籍上下架操作
一.新增页面书籍类别下拉框加载 1.查询所有类型的方法(CategoryDao) package com.xly.dao;import java.util.List;import com.xly.en ...
新增书籍类别下拉框加载、书籍上下架功能
课程内容: 1.新增书籍 2.上架书籍 3.下架书籍一.新增页面书籍类别下拉框加载 1.根据下拉框类型写实体类 2.查询所有类型的方法(CategoryDao) package com.zxy.da ...
android无感刷新下拉分页,GitHub - TakWolf/Android-RefreshAndLoadMore-Demo: 一种简单的并且优雅的方式实现下拉刷新和加载更多的分页效果。...
Android - RefreshAndLoadMore Demo 一种简单的并且优雅的方式实现下拉刷新和加载更多的分页效果. 包含 ListView 和 RecyclerView 两种组件的对应实现 ...
RecyclerView的下拉刷新和加载更多动画
下拉刷新和加载更多 1.https://github.com/jianghejie/XRecyclerView 2.http://blog.csdn.net/jabony/article/detail ...

react react-pdf实现在线pdf加载（翻页加载、下拉滚动加载）

目录

导入react-pdf

在文件中引入并使用

下拉展示

react react-pdf实现在线pdf加载（翻页加载、下拉滚动加载）相关推荐

最新文章

热门文章