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. Oracle中with as用法

    with as 相当于虚拟视图. 例子:需求描述 按照x列分组后统计y列的总值,最终目标是选出比y列总值的三分之一大的那些分组统计信息   使用子查询方式实现最容易想到的方法 SELECT x, SU ...

  2. 如何把pdf文档转化为word

    在工作中常常遇到大量的pdf文档,再加工进行处理文件,特别的不方便,需要转换为WORD. 尝试如下: 使用wps自带的工具转换,提示需要是会员才能进行.否则只能进行5页以下的转换. 再想是不是又有个这 ...

  3. 26718汉字,gbk是23940个汉字,gb18030有76556个汉字

    1 a 厑 吖 呵 啊 嗄 嬶 腌 錒 锕 阿 仰 卬 岇 昂 昻 枊 盎 肮 腌 軮 醠 雵 骯 侒 俺 儑 匎 匼 厂 厈 唵 啽 垵 埯 堓 媕 安 屵 岸 峎 峖 广 庵 按 揞 晻 暗 案 ...

  4. CSS的盒子模型（Box Model）

    盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒 ...

  5. eNSP模拟器路由器无法正常启动一直显示“#”——问题解决方法

    eNSP模拟器路由器无法正常启动一直显示“#” 问题项如截图: 解决方案: 1. 打开自己电脑的控制面板 -->> 系统和安全 -->> Windows Defender防火墙 ...

  6. PYTHON网络爬虫与信息提取[正则表达式的使用](单元七)

    正则表达式由字符和操作符构成 . 表示任何单个字符 []字符集,对单个字符给出取值范围 [abc]或者关系  [a-z]表示 [^abc]表示非这里面的东西 非字符集 * 表示星号之前的字符出现0次或 ...

  7. Python之collection

    1.计数器(counter) Counter是对字典类型的补充,用于追踪值的出现次数. ps:具备字典的所有功能 + 自己的功能 c = Counter('abcdeabcdabcaba') prin ...

  8. if (donutString.indexOf("dozen") != -1)是什么意思

    if (donutString.indexOf("dozen") != -1)是什么意思 function parseDonuts(donutString) { numDonuts ...

  9. oracle-Expdp/impdp命令

    建立逻辑路径 create or replace directory dumpdir as 'c:\'; grant read,write on directory dumpdir to scott; ...

  10. oracle 共享服务器监控

    1.   观察sga的使用情况 select * from v$sgastat where pool=’large pool’; 2.   观察调度程序是否充足: 首先看每个调度程序的忙闲: sele ...