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. sending data mysql slow Mysql查询非常慢的可能原因

    1.用explain看看mysql的执行情况,可以得知,task_id扫描了近20万条数据,而且这个task_id不是索引 2.为这个task_id所在的表,将此字段添加索引后,查询就变得很快了

  2. spring和mybatis整合遇到org.springframework.beans.factory.BeanDefinitionStoreException

    今天对spring和mybatis整合进行练习,通过MapperScannerConfigurer进行mapper扫描 但是在进行单元测试的时候,死活就是报错,具体报错如下: org.springfr ...

  3. 第十章—DOM(一)——Document类型

    DOCUMENT类型 JS通过document类型表示文档,在文档中document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性,因 ...

  4. Centos 下添加开机自启动服务和脚本【转】

    最近刚玩Centos7的系统,跟Centos6还是很多方面有改变的,这里记录一下怎么在Centos7下添加开机自启动脚本和服务的方法. 1.添加开机自启服务 我这里以docker 服务为例,设置如下两 ...

  5. Python3.7.4入门-5输入输出

    5 输入输出 5.1 格式化字符串字面值 在字符串的开始引号或三引号之前加上一个 f 或 F .在此字符串中,你可以在 { 和 } 字符之间写可以引用的变量或字面值的 Python 表达式. > ...

  6. python csv文件打开错误：_csv.Error: line contains NULL byte

    当python读取文件出现_csv.Error: line contains NULL byte时, # -*- coding:utf-8 -*- import csv with open(r'E:\ ...

  7. Chrome浏览器一直请求clients1.google.com:443

    浏览器莫名其妙地发一大堆请求,往clients1.google.com:443,把各种扩展各种插件关了都不管用,后来才发现问题,取消“密码和表单”中的“自动填充”功能,即可解决.

  8. Python比较有用的小语法

    额,这是在Codeforces做题的时候从Virtual judge那儿学的 #ord()内置函数,将单个字符变为int#chr()内置函数,将int变为单个字符# for : else ( 或 wh ...

  9. Android Bitmap缓存介绍

    转载自http://blog.csdn.net/linghu_java/article/details/8595717 Android中加载一个Bitmap(位图)到你的UI界面是非常简单的,但是如果 ...

  10. VOIP开源项目源码地址

    http://blog.csdn.net/hwz119/article/details/1781482     VoIP bookmarks from Klaus Darilion Below you ...