react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项

   之前做了一个需求,在注册账号的时候,让用户同意服务条款, 服务条款是一个PDF文件, 这就需要在react内加载PDF文件的插件了,今天特地做一个总结

我用的版本是4.0.1

然后在页面内引入

import PDF from 'react-pdf-js';

然后在需要的地方直接使用标签就行了

page参数是加载的PDF的第几页,可以通过更改page的数字完成翻页的功能

原本的想法是加载所有页,然后用户滚动条拉到最下面才可以点击同意,但是我查了很多资料没有发现有什么办法可以一次性加载所有页,所以只能做成了翻页显示,到了最后一页才可以点击同意

最后效果如下:

翻到最后一页的时候下一页变成同意按钮:

- - - END - - -

react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项的更多相关文章

  1. 向下滚动页面加载图片的js

    js代码 scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图 ...

  2. 一个页面从输入url到页面加载显示完成,中间都经历了什么

    第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3 ...

  3. html页面预览pdf文件使用插件pdfh5.js

    html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...

  4. 一个页面从输入URL 到页面加载显示完成的过程中都发生了什么

    前端面试/笔试必考问题,越详细越好 先简单得讲: 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求: 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML.JS.CSS. ...

  5. 8.一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

    注:这题胜在区分度高,知识点覆盖广,再不懂的人,也能答出几句, 而高手可以根据自己擅长的领域自由发挥,从URL规范.HTTP协议.DNS.CDN.数据库查询. 到浏览器流式解析.CSS规则构建.lay ...

  6. 一个页面从输入URL 到页面加载显示完成,这个过程中都发生了什么?

    1.当发送一个URL请求时,浏览器会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询,解析获取网址的IP地址:2.浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/ ...

  7. PCL可视化显示 直接加载显示pcb文件

    简单可视化类,是指直接在程序中使用,而且不支持多线程. #include<iostream> #include<pcl\point_cloud.h> #include<p ...

  8. 一个页面从输入URL到页面加载显示完成,这个过程都发生了什么?

    对于网址栏的URL不同的操作方式有不同的加载资源.获取数据的方式,下面的详细过程针对"在地址栏输入URL,按enter(回车)键加载资源"此种操作方式做解析,其它的方式的过程大同小 ...

  9. 浏览器从输入URL到页面加载显示完成全过程解析

    一 浏览器查找域名对应的 IP 地址(域名解析的过程,先进行缓存的查看): 1.在浏览器中输入www.qq.com域名,操作系统会先检查自己本地的hosts文件是否有这个网址映射关系,如果有,就先调用 ...

随机推荐

  1. Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、 自定义分页器

    MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...

  2. python基础--GIL全局解释器锁、Event事件、信号量、死锁、递归锁

    ps:python解释器有很多种,最常见的就是C python解释器 GIL全局解释器锁: GIL本质上是一把互斥锁:将并发变成串行,牺牲效率保证了数据的安全 用来阻止同一个进程下的多个线程的同时执行 ...

  3. jmeter 之 https 请求

    本文为自己学习总结,转载需说明出处. jmeter发送https请求需要在巨jmeter中导入被测试网站的安全证书. 一.通过浏览器登录对应的网站导出安全证书.下面操作以360浏览器为例: 二.把导出 ...

  4. HDU 1690 最短路

    #include<stdio.h> #include<string.h> #include<queue> #include<algorithm> usi ...

  5. 最短路径问题 HDU - 3790 (Dijkstra算法 + 双重权值)

    参考:https://www.cnblogs.com/qiufeihai/archive/2012/03/15/2398455.html 最短路径问题 Time Limit: 2000/1000 MS ...

  6. update批量更新某一列成其它列对应的值【原】

    update批量更新某一列成其它列对应的值 postgresql 标准sql语句 update AA set name = BB.name , AA.sex = BB.sex from BB wher ...

  7. Codeforces 442C

    题目链接 C. Artem and Array time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  8. SPSS和Mplus如何做非线性中介调节效应分析?如倒U形曲线

    SPSS和Mplus如何做非线性中介调节效应分析?如倒U形曲线 传统的线性回归模型用的比较多,但有时候变量之间的关系更符合非线性关系,此时使用非线性模型其拟合度会更好,模型预测效果更佳.在非线性关系中 ...

  9. Android中View的layout mechanism(布局机制)

    layout mechanism Android中View的layout mechanism主要分为两个阶段:measure阶段和layout阶段.layout mechanism按照一定的顺序进行, ...

  10. thinkphp5.0 验证提示信息的类型

    以上是5.0.12版本 下面是5.0.5版本,没有elseif 上图中红方格的值只能是string类型,但是这种情况是在5.0.5版本是可以设置为array类型的