caimei-repository
/
caimei-applets-caimei


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title>PDFH5</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/pdfh5.css" />
		<link href="https://www.gjtool.cn/download/pdfh5.png" type="image/x-icon" rel="shortcut icon" />
		<style>
			html,
        body {
            width: 100%;
            height: 100%;
        }
        
        #demo {
            display: none;
            /* height: 33%; */
        }
		#demo2 {
		    /* display: none; */
		    height: 33%;
		}
		#demo3 {
		    /* display: none; */
		    height: 33%;
		}
    </style>
	</head>

	<body>
		<div id="app">
			<div class="text-wrapper">
				<div class="text part1">
					<div>
						<span class="letter">
							<div class="character">L</div> <span></span>
						</span>
						<span class="letter">
							<div class="character">o</div> <span></span>
						</span>
						<span class="letter">
							<div class="character">a</div> <span></span>
						</span>
						<span class="letter">
							<div class="character">d</div> <span></span>
						</span>
						<span class="letter">
							<div class="character">i</div> <span></span>
						</span>
						<span class="letter">
							<div class="character">n</div> <span></span>
						</span>
						<span class="letter">
							<div class="character">g</div> <span></span>
						</span>
					</div>
				</div>
				<div class="how-to"><span>正在加载中，请您耐心等待...</span></div>
			</div>

		</div>
		<div id="demo"></div>
	<!-- 	<div id="demo2"></div>
		<div id="demo3"></div> -->
		<script src="js/pdf.js"></script>
		<script src="js/pdf.worker.js"></script>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var pdfh5;
			$(function() {
				$("#app").remove()
				$("#demo").show()
				pdfh5 = new Pdfh5('#demo', {
					pdfurl: "https://www.gjtool.cn/pdfh5/git.pdf",
					// renderType:"svg",
					// textLayer:true,
					// background:{
					// 	image:"url('pdfh5.png')",
					// 	repeat:"no-repeat",
					// 	position:"left top",
					// 	size:"40px 40px"
					// },
					// goto:6,
					// URIenable:true //开启浏览器地址栏file参数获取
				});
				pdfh5.on("zoom", function (scale) {
				    console.log(scale)
				})
				// new Pdfh5('#demo2', {
				// 	pdfurl: "222.pdf"
				// });
				// new Pdfh5('#demo3', {
				// 	pdfurl: "git.pdf"
				// });
				// setTimeout(() => {
				//     var pdfh5 = new Pdfh5('#demo', {
				//         pdfurl: "https://www.gjtool.cn/pdfh5/git.pdf"
				//     });
				//     setTimeout(() => {
				//         var pdfh5 = new Pdfh5('#demo', {
				//             pdfurl: "1.pdf"
				//         });
				//         setTimeout(() => {
				//             var pdfh5 = new Pdfh5('#demo', {
				//                 pdfurl: "test.pdf"
				//             });
				//             pdfh5.on("complete", function (status, msg, time) {
				//                 console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
				//             })
				//         }, 5000);
				//     }, 5000);
				// }, 5000);

				//配置项参数 renderType:"svg" 渲染模式为svg，默认canvas
				// var pdfh5 = new Pdfh5('#demo', {
				//     pdfurl: "./default.pdf",
				//     renderType:"svg"
				// });

				//配置项参数 lazy:true 开启懒加载，默认是false,不开启懒加载
				// var pdfh5 = new Pdfh5('#demo', {
				//     pdfurl: "./default.pdf",
				//     lazy:true 
				// });

				//配置项参数 URIenable:true 开启获取地址栏file参数，获取地址栏pdf路径?file=xxx.pdf，默认false不开启
				// var pdfh5 = new Pdfh5('#demo', {
				//     URIenable:false,
				//     pdfurl: "./default.pdf"
				// });

				//配置项参数 是否显示小部件 顶部绿色加载进度条loadingBar 左上角页码显示pageNum 右下角回到顶部按钮backTop  默认显示
				//		var pdfh5 = new Pdfh5('#demo', {
				// 			 loadingBar: false,
				//           pageNum:false,
				//           backTop:false
				// 		});

				//配置项参数data，文件流形式传入  pdfurl和data二选一
				//		var pdfh5 = new Pdfh5('#demo', {
				// 			data: data
				// 		});

				//配置项参数scrollEnable:false不允许pdf滚动,true允许pdf滚动  默认允许
				//		var pdfh5 = new Pdfh5('#demo', {
				// 			scrollEnable:false,//是否允许pdf滚动
				// 			pdfurl: url
				// 		});
				//pdfh5.scrollEnable(true)允许pdf滚动,pdfh5.scrollEnable(false)不允许pdf滚动

				//配置项参数zoomEnable:false不允许pdf手势缩放,true允许pdf手势缩放  默认允许
				//		var pdfh5 = new Pdfh5('#demo', {
				// 			zoomEnable:false,//是否允许pdf手势缩放
				// 			pdfurl: url
				// 		});
				//pdfh5.zoomEnable(true)允许pdf手势缩放，pdfh5.zoomEnable(false)不允许pdf手势缩放

				//pdfh5还原、销毁（附带回调函数）：   pdfh5.reset pdfh5.destroy 
				//pdfh5显示、隐藏（附带回调函数）：   pdfh5.show pdfh5.hide 

				//pdf准备开始渲染，此时可以拿到pdf总页数
				pdfh5.on("ready", function() {
					console.log("pdf准备开始渲染，总页数：" + this.totalNum)
				})
				//监听pdf渲染成功
				pdfh5.on("success", function(time) {
					time = time / 1000
					console.log("pdf渲染完成，总耗时" + time + "秒");
					//滚动到第3页
					// pdfh5.goto(3);
				})
				//监听pdf渲染失败
				// pdfh5.on("error", function (time) {
				//     console.log("渲染失败，总耗时" + time + "毫秒")
				// })
				//监听完成事件，加载失败、渲染成功都会触发
				 pdfh5.on("complete", function (status, msg, time) {
				    console.log("状态：" + status + "，总耗时：" + time + "毫秒，总页数：" + this.totalNum,msg)
				})
				
				//监听渲染中事件
				 pdfh5.on("render", function (currentNum, time, currentPageDom) {
					 // currentPageDom.append("<span class='name-logo'>张三</span>")
					console.log("当前页码：" + currentNum)
				})
				//on方法,监听事件： 开始初始化 init 准备渲染pdf ready 加载完成 complete 加载失败 error 加载成功 success 渲染pdf中 render
				// 缩放zoom   滚动scroll 显示show  隐藏hide 还原reset 销毁destroy  允许缩放zoomEnable 允许滚动scrollEnable

				//pdfh5支持在线预览 
				//http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/default.pdf
			})
		</script>
	</body>

</html>