react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项
react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项
之前做了一个需求,在注册账号的时候,让用户同意服务条款, 服务条款是一个PDF文件, 这就需要在react内加载PDF文件的插件了,今天特地做一个总结
我用的版本是4.0.1

然后在页面内引入

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

page参数是加载的PDF的第几页,可以通过更改page的数字完成翻页的功能
原本的想法是加载所有页,然后用户滚动条拉到最下面才可以点击同意,但是我查了很多资料没有发现有什么办法可以一次性加载所有页,所以只能做成了翻页显示,到了最后一页才可以点击同意
最后效果如下:

翻到最后一页的时候下一页变成同意按钮:
- - - END - - -
react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项的更多相关文章
- 向下滚动页面加载图片的js
js代码 scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图 ...
- 一个页面从输入url到页面加载显示完成,中间都经历了什么
第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3 ...
- html页面预览pdf文件使用插件pdfh5.js
html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...
- 一个页面从输入URL 到页面加载显示完成的过程中都发生了什么
前端面试/笔试必考问题,越详细越好 先简单得讲: 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求: 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML.JS.CSS. ...
- 8.一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
注:这题胜在区分度高,知识点覆盖广,再不懂的人,也能答出几句, 而高手可以根据自己擅长的领域自由发挥,从URL规范.HTTP协议.DNS.CDN.数据库查询. 到浏览器流式解析.CSS规则构建.lay ...
- 一个页面从输入URL 到页面加载显示完成,这个过程中都发生了什么?
1.当发送一个URL请求时,浏览器会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询,解析获取网址的IP地址:2.浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/ ...
- PCL可视化显示 直接加载显示pcb文件
简单可视化类,是指直接在程序中使用,而且不支持多线程. #include<iostream> #include<pcl\point_cloud.h> #include<p ...
- 一个页面从输入URL到页面加载显示完成,这个过程都发生了什么?
对于网址栏的URL不同的操作方式有不同的加载资源.获取数据的方式,下面的详细过程针对"在地址栏输入URL,按enter(回车)键加载资源"此种操作方式做解析,其它的方式的过程大同小 ...
- 浏览器从输入URL到页面加载显示完成全过程解析
一 浏览器查找域名对应的 IP 地址(域名解析的过程,先进行缓存的查看): 1.在浏览器中输入www.qq.com域名,操作系统会先检查自己本地的hosts文件是否有这个网址映射关系,如果有,就先调用 ...
随机推荐
- oracle function学习1
oracle function学习基层: 函数就是一个有返回值的过程. 首先 知道oracle 使用限制: 函数调用限制: 1. SQL语句中只能调用存储函数(服务器端),而不能调用客户端 ...
- Leetcode36.Valid Sudoku有效的数独
判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一个以粗实线分隔的 ...
- 微信网页授权demo1
要授权首先要网页域名授权 然后就index.php代码如下 <?php require_once("./function.php"); $url = 'http://'.$_ ...
- 【CS Round #44 (Div. 2 only) B】Square Cover
[链接]点击打开链接 [题意] 给你一个n*m的矩形,让你在其中圈出若干个子正方形,使得这些子正方形里面的所有数字都是一样的. 且一样的数字,都是在同一个正方形里面.问你有没有方案. [题解] 相同的 ...
- Faster RCNN算法训练代码解析(2)
接着上篇的博客,我们获取imdb和roidb的数据后,就可以搭建网络进行训练了. 我们回到trian_rpn()函数里面,此时运行完了roidb, imdb = get_roidb(imdb_name ...
- sublime3安装javascript控制台环境 方法2
1.下载node.js sublimeText3- 安装nodejs插件 ctrl+shift+p — install package —nodejs 2.修改配置文件 在 Sublie Text ...
- pyenv虚拟环境管理python多版本和软件库
可能大家在日常工作中会遇到这么个问题,现在基本的linux系统都是自带老版本的python2.7.x版本,我又不想用老版本,但直接升级可能会出问题,或是依赖老版本的程序就运行不了,有没办法能安装3.x ...
- myeclipse10 java builder path libraries 添加tomcat
Error: The import javax.servlet cannot be resolved The import javax.servlet.http.HttpServlet ...
- pandas使用手册
工欲善其事必先利其器,在使用Python做数据挖掘和数据分析时,一大必不可少的利器就是Pandas库了.pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的,其纳入了大量库 ...
- Jeff Dean 光辉事迹
这是Google 2007年的愚人节笑话,罗列了很多Jeff Dean的“光辉事迹”.大名鼎鼎的Jeff Dean想必不用我介绍了.……好吧,还是介绍一下,Jeff Dean是Google最早的一批员 ...