VUE + pdfh5 实现pdf 预览,主要用来uniappH5实现嵌套预览PDF

1. 安装依赖

npm install pdfh5 

2. pdfh5 预览(移动端，h5)

npm install pdfh5 , （会报错，需要其他依赖，不能直接用提示的语句直接npm下载，依旧会报错，npm报错：These dependencies were not found:* canvas in ./node_modules/pdfh5/js/pdf.js* dommatrix/dist/d ）

npm install canvas

 vue2 实例

• vue 文件中 创建div 节点

• <template>
    <div class="wrap">
      <div id="demo"></div>
    </div>
  </template>

• js 中配置

• <script>
  import Pdfh5 from "pdfh5";  // 这两个一定要引入
  import "pdfh5/css/pdfh5.css"; // 这两个一定要引入， 这个是在加载时，顶部会出来一个加载进度条和一些其他的样式
  export default {
    name: "openPdf",
    data() {
      return {
        pdfh5: null,
      };
    },
    mounted() {
      // ---------------------------- 方法一 -----------------------------
      this.pdfh5 = new Pdfh5("#demo", {
        pdfurl: "https://www.*********uanfu.pdf", // pdf 地址，请求的地址需要为线上的地址，测试的本地的地址是不可以的
        lazy: true, // 是否懒加载
        withCredentials: true,
        renderType: "svg",
        maxZoom: 3, //手势缩放最大倍数 默认3
        scrollEnable: true, //是否允许pdf滚动
        zoomEnable: true, //是否允许pdf手势缩放
      });
      // --------------------------- 方法二 ---------------------------
      //实例化
      this.pdfh5 = new Pdfh5("#demo", {
          pdfurl: "https://www**********anfu.pdf",
      });
      //监听完成事件
      this.pdfh5.on("complete", function (status, msg, time) {
          console.log("状态：" + status +"，信息：" +msg +"，耗时：" + time + "毫秒，总页数：" + this.totalNum);
      });
    },
  };
  </script>
   
  

  本人亲测用的方法二,方法一会控制台报错

• Vue3 实例

• import Pdfh5 from "pdfh5";
  import "pdfh5/css/pdfh5.css";
  
  const refPdf = ref(null);
  const LoadPdf = (url) => {
    const pdfh5 = new Pdfh5(refPdf.value, {
      pdfurl: url,
    });
    pdfh5.on("complete", (status, msg, time) => { });
  };
  
  const getDocById = (id) => {
    readPDF(id).then((res) => {
      if (res) {
        LoadPdf(window.URL.createObjectURL(new Blob([res])));
      }
    });
  }