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

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

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

我用的版本是4.0.1

然后在页面内引入

import PDF from ‘react-pdf-js‘;

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

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

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

最后效果如下:

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

- - - END - - -

原文地址:https://www.cnblogs.com/zizaiwuyou/p/10868606.html

时间: 2024-10-11 06:46:10

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

js数据显示在文本框中(页面加载显示和按钮触动显示)

web代码如下: <!DOCTYPE html> <html> <head> <title>jsTest02.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is

从输入 URL 到页面加载显示完成的过程

前言:"一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?" 这个问题我想大多数人都不会陌生,好像是前端面试题经常会出现的,在此我也好好梳理梳理了一番,总结成这篇文章,希望能对和我一样在前端道路上奋进的小白们有所帮助,一起学习,交流. 我把这个问题拆解成两个过程: 1. 用户输入 url ---> 客户端(浏览器)拿到服务端的数据 2. 浏览器拿到数据 ---> 呈现页面(也就是浏览器工作过程) 搞清楚这两个过程后,我们也算是完整的回答了前言部分所提的问题

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

一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了: 1.浏览器补全URL地址 在输入完URL之后,浏览器会自动检查该地址是否完整,例如是否有添加https协议,若发现不完整,会自动补全. 2.向DNS查询IP地址 每个域名都对应一个或多个提供相同服务服务器的 IP 地址,只有知道服务器 IP 地址才能建立连接,所以需要通过 DNS 把域名解析成一个 IP 地址. 3.得到IP地址后,建立连接,进行三次握手 即每次建立连接前,客户端和服务端都要先进行三次对话才开始正式传输内容,三次对

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

前端面试/笔试必考问题,越详细越好 先简单得讲: 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求: 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML.JS.CSS.图象等): 浏览器对加载到的资源(HTML.JS.CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM): 载入解析到的资源文件,渲染页面,完成. 详细得说: 1.当发送一个URL请求时,不管这个URL是Web页面的URL还是Web页面上每个资源的URL,浏览器会开启一个线程来处理这个

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

第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3.在发送http请求前,需要域名解析(DNS解析)(DNS(域名系统,Domain Name System)是互联网的一项核心服务,它作为可以将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住IP地址.),解析获取相应的IP地址. 4.浏览器向服务器发起tcp连接,

页面内加载浏览器

//UIWebView:用来加载web视图 UIWebView *webView=[[UIWebView alloc]initWithFrame:CGRectMake(0, 150, 375, 500)]; //要加载的web地址 NSURL *url=[NSURL URLWithString:@"http://www.baidu.com"]; //创建一个请求对象,封装了请求的资源地址 NSURLRequest *request=[NSURLRequest requestWithUR

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

一 浏览器查找域名对应的 IP 地址(域名解析的过程,先进行缓存的查看): 1.在浏览器中输入www.qq.com域名,操作系统会先检查自己本地的hosts文件是否有这个网址映射关系,如果有,就先调用这个IP地址映射,完成域名解析. 2.如果hosts里没有这个域名的映射,则查找本地DNS解析器缓存,是否有这个网址映射关系,如果有,直接返回,完成域名解析. 3.如果hosts与本地DNS解析器缓存都没有相应的网址映射关系,首先会找TCP/ip参数中设置的首选DNS服务器,在此我们叫它本地DNS服

02-让 framset 框架中的页面全屏显示

<script type="text/javascript"> window.onload=function(){ if(window.parent!=window){//如果是在框架中 //就让框架页面跳转到登录页面 window.parent.location.href="${pageContext.request.contextPath}/login.jsp"; } }; </script> 原文地址:https://www.cnblo

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

1.浏览器通过DNS查找域名对应的IP地址(DNS查询:浏览器缓存-->系统缓存-->路由器缓存-->ISP DNS 缓存 -->根域名服务器) 2.浏览器向Web服务器发送一个HTTP请求(TCP三次握手) 3.服务器301重定向(从http://example.com重定向到http://www.example.com) 4.浏览器跟踪重定向地址,请求另一个带www的网址 5.服务器处理请求(通过路由读取资源) 6.服务器返回一个HTTP响应(报头中把Content-type设