pdf.html 3.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="apple-mobile-web-app-capable" content="yes">
  6. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  7. <meta name="format-detection" content="telephone=no" />
  8. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  9. <meta http-equiv="pragma" content="no-cache">
  10. <meta http-equiv="cache-control" content="no-cache">
  11. <meta http-equiv="expires" content="0">
  12. <title>PDFH5</title>
  13. <link rel="stylesheet" href="../../css/pdfh5/style.css" />
  14. <link rel="stylesheet" href="../../css/pdfh5/pdfh5.css" />
  15. <style>
  16. .pdfjs {
  17. width: 100%;
  18. height: 100%;
  19. /* height: 50%; */
  20. overflow: hidden;
  21. background: #fff;
  22. position: relative;
  23. }
  24. /* .pdfjs2 {
  25. width: 100%;
  26. height: 50%;
  27. overflow: hidden;
  28. background: #fff;
  29. position: relative;
  30. } */
  31. </style>
  32. </head>
  33. <body>
  34. <div class="pdfjs"></div>
  35. <!-- <div class="pdfjs2"></div> -->
  36. <script src="./pdf.js" type="text/javascript" charset="utf-8"></script>
  37. <script src="./pdf.worker.js" type="text/javascript" charset="utf-8"></script>
  38. <!-- <script src="./jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>-->
  39. <script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>
  40. <!-- <script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
  41. <script src="./pdfh5.js" type="text/javascript" charset="utf-8"></script>
  42. <script type="text/javascript">
  43. var url = "http://118.89.56.33:8999/pdfh5/default.pdf"
  44. // var url = 'default.pdf';
  45. var pdfh5 = new Pdfh5('.pdfjs', {
  46. scrollEnable:false,//是否允许pdf滚动
  47. pdfurl: url
  48. });
  49. pdfh5.on("start",function(str){
  50. })
  51. pdfh5.on("complete",function(str){
  52. pdfh5.scrollEnable(true)
  53. })
  54. //监听当前加载的pdf页数,currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,
  55. pdfh5.on("renderPages",function(currentPageDom){
  56. console.log(this.currentNum)
  57. console.log(pdfh5.currentNum)
  58. })
  59. // var pdfh52 = new Pdfh5('.pdfjs2',{
  60. // pdfurl: 'test.pdf'
  61. // });
  62. //pdfh5.zoomChange pdfh5.renderPages pdfh5.renderEnd pdfh5.scroll pdfh5.show pdfh5.hide
  63. //pdfh5还有pdfh5开始初始化、pdfh5加载完成、PDF加载失败、PDF加载成功事件: pdfh5.start pdfh5.complete pdfh5.error pdfh5.success
  64. //pdfh5还有还原事件、销毁事件(附带回调函数): pdfh5.reset pdfh5.destroy
  65. //pdfh5还有静态参数:
  66. //pdf最外层div pdfh5.container
  67. //pdf第二层div pdfh5.viewerContainer
  68. //所有包裹pdf的div的父div pdfh5.viewer
  69. //所有包裹pdf的div pdfh5.pages
  70. //pdf加载完成状态 pdfh5.pdfLoaded
  71. //pdf总页数 pdfh5.totalNum
  72. //pdf当前页数 pdfh5.currentNum
  73. //pdfh5初始化的时间戳 pdfh5.initTime
  74. //pdfh5开始渲染距离初始化多少毫秒 pdfh5.startTime
  75. //pdfh5渲染完毕距离初始化多少毫秒 pdfh5.endTime
  76. //pdfh5渲染过程中时间戳 pdfh5.renderTime
  77. //pdfh5支持在线预览 http://www.gjtool.cn/pdfh5/pdf.html?file=http://xxx.xxx.xxx/xxx.pdf
  78. //新增配置参数scrollEnable:false不允许pdf滚动,true允许pdf滚动
  79. // var pdfh5 = new Pdfh5('.pdfjs', {
  80. // scrollEnable:false,//是否允许pdf滚动
  81. // pdfurl: url
  82. // });
  83. //新增方法pdfh5.scrollEnable(true)允许pdf滚动,pdfh5.scrollEnable(false)不允许pdf滚动
  84. //新增on方法,监听各种事件
  85. // pdfh5.on("start",function(str){
  86. // console.log(str)
  87. // })
  88. // pdfh5.on("complete",function(str){
  89. // pdfh5.scrollEnable(true)
  90. // })
  91. </script>
  92. </body>
  93. </html>