html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html

xiaoyao_studioZIPpdf.zip  368.55KB

资源文件列表:

ZIP pdf.zip 大约有8个文件
  1. pdf/
  2. pdf/jquery-1.11.3.min.js 93.71KB
  3. pdf/pdf.js 337.35KB
  4. pdf/pdf.worker.js 770.3KB
  5. pdf/pdfh5.css 9.62KB
  6. pdf/pdfh5.js 59.74KB
  7. pdf/style.css 37.29KB
  8. pdf.html 3.15KB

资源介绍:

html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载 html5-显示PDF,源代码免费下载

<!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>详情</title> <link rel="stylesheet" href="./pdf/style.css" /> <link rel="stylesheet" href="./pdf/pdfh5.css" /> <style> html,body { width: 100%; height: 100%; } .operate { position: fixed; bottom: 20px; right: 20px; width: 100px; padding: 5px; display: flex; background-color: rgba(0,0,0,0.1); border-radius: 5px; z-index: 9999; } #up .img,#down .img { width:20px; height:20px; } #number { width:50px; text-align:center; } #down { margin-left:10px; } </style> </head> <body> <div class="operate"> <div id="up"><image class="img" src="dit-images/big.png"></image></div> <div id="number">100</div> <div>%</div> <div id="down"><image class="img" src="dit-images/small.png"></image></div> </div> <div id="pdf-view"></div> <script src="./pdf/pdf.js"></script> <script src="./pdf/pdf.worker.js"></script> <script src="./pdf/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="./pdf/pdfh5.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var pdfh5; $(function() { $("#pdf-view").show() var url = getQuery('url'); pdfh5 = new Pdfh5('#pdf-view', { pdfurl: url, lazy:true, renderType:'png', // svg URIenable:true //开启浏览器地址栏file参数获取 }); //pdf准备开始渲染,此时可以拿到pdf总页数 pdfh5.on("ready", function() { console.log("pdf准备开始渲染,总页数:" + this.totalNum) }) //监听pdf渲染成功 pdfh5.on("success", function(time) { time = time / 1000 console.log("pdf渲染完成,总耗时" + time + "秒"); }) }) function getQuery(name) { // 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在) let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); let r = window.location.search.substr(1).match(reg); if(r != null) { // 对参数值进行解码 return decodeURIComponent(r[2]); } return null; } let count = 100; $('#up').click(function() { var div = $('.pdfjs .pdfViewer .pageContainer img') var width = div.width(); var add = width / 10; count += 10; div.width(width + add) $('#number').text(count); }) $('#down').click(function() { var div = $('.pdfjs .pdfViewer .pageContainer img') var width = div.width(); var add = width / 10; count -= 10; div.width(width - add) $('#number').text(count); }) </script> </body> </html>
100+评论
captcha