<!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: 50%; */ } </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> <script src="js/pdf.js"></script> <script src="js/pdf.worker.js"></script> <script src="js/jquery-1.11.3.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: "git.pdf", // ,URIenable:true //开启浏览器地址栏file参数获取 }); // 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 + "秒") }) //监听pdf渲染失败 // pdfh5.on("error", function (time) { // console.log("渲染失败,总耗时" + time + "毫秒") // }) //监听完成事件,加载失败、渲染成功都会触发 // pdfh5.on("complete", function (status, msg, time) { // console.log("状态:" + status + ",信息:" + msg + ",总耗时:" + time + "毫秒,总页数:" + this.totalNum) // }) //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>