前言：pdfh5.js是基于pdf.js和jQuery来做的，支持web/h5/移动端PDF预览手势缩放等。支持canvas和svg两种渲染模式，支持ajax和fetch两种请求方式，并且支持懒加载

两种使用方式

方式一：script标签引入的方式

1.引入css

  1. <link rel="stylesheet" href="../../css/pdfh5.css" />

2.创建div

  1. <div id="demo" style="width:100vw;height:100vh"></div>

3.引入JS(pdfh5是基于pdf.js和jquey,所以这两个引用在前)

  1. <script type="text/javascript" src="../../js/jquery-2.1.0.js"></script>    
  2. <script type="text/javascript" src="../../js/pdf.js"></script>
  3. <script type="text/javascript" src="../../js/pdf.worker.js"></script>
  4. <script type="text/javascript" src="../../js/pdfh5.js"></script>

4.实例化（下面的pdf_detail可以是本地的pdf，也可以是ajax获取的pdf，ajax获取的会有跨域问题，需要后端配合解决）

  1. var pdf_detail ='https://'+ info.CONTENT; 
  2. var pdfh5 = new Pdfh5('#demo',{
  3.     pdfurl:pdf_detail
  4. })

上面用的是ajax获取到的pdf,会有跨域问题（最终是后端配合解决了这个问题）：
image.png

方式二：npm安装方式（适用于vue）

1.安装

  1. npm install pdfh5

2.使用

  1. <template>
  2. <div  id="app">
  3.     <div  id="demo"></div>
  4. </div>
  5. </template>
  7. <script>
  9. import Pdfh5 from "pdfh5";
  11. export default {
  12.     name: 'App',
  13.     data() {
  14.      return {
  15.                      pdfh5:  null
  16.      };
  17.     },
  18. mounted() {
  19.    //实例化
  20.       this.pdfh5 = new  Pdfh5("#demo", {
  21.       pdfurl:  "../../static/test.pdf"
  22.    });
  23.      //监听完成事件
  24.    this.pdfh5.on("complete", function (status, msg, time) {
  25.         console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
  26.      })
  27. }
  29. }
  31. </script>
  35. <style>
  36. @import "pdfh5/css/pdfh5.css";
  37. *{padding: 0; margin: 0;}
  38. html,body,#app { width: 100%;height: 100%; }
  39. </style>

pdfh5打包下载：https://www.gjtool.cn/articles/2019/09/04/1567571649102.html