vue-使用pdfh5预览pdf

• 父组建

// url为预览的pdf文件地址
<showPdf v-else :url="url" />

• 子组建

// dom
<div class="pdf_box">
  <div id="demo"></div>
</div>

// js
import Pdfh5 from "pdfh5";
 export default {
   props: {
     url: {
       type: String,
       default: ''
     }
   },
   data(){
     return {
       pdfh5: null
     }
   },
   mounted() {
     const pdfurl = this.url.replace(/^http:\/\//, 'https://') // 修改当前pdf地址为https://开头
     this.pdfh5 = new Pdfh5("#demo", {
       pdfurl: pdfurl
     })
     //监听完成事件
     this.pdfh5.on("complete", function (status, msg, time) {
       console.warn("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
     })
   },
   methods: {
   }
 }

// css
.pdf_box {
 width: 100%;
 margin-bottom: .32rem;
}

监听注入完成失败的原因当前pdf文件的src不是https,需要修改成一致