h5在线预览pdf文件

1. 下载插件
   npm i pdfh5
   2.在vue文件中如此写

<template>
  <div id="app1">
    <div id="demo"></div>
  </div>
</template>
<script>
import Pdfh5 from "pdfh5";   //必须引入
import "pdfh5/css/pdfh5.css";  // 页面加载时顶部出现进度条
import URL from "@/utils/url.js";

export default {
  name: "App",
   components: { mtnav },
  data() {
    return {
      pdfh5: null,
      url: URL.agreementlist,
    };
  },
  mounted() {
    setTimeout(() => {
      //实例化
      this.pdfh5 = new Pdfh5("#demo", {
        pdfurl: this.url + this.$route.query.pdfurl,
      });
    //监听完成事件
    this.pdfh5.on("complete", function (status, msg, time) {
      console.log(
        "状态：" +
          status +
          "，信息：" +
          msg +
          "，耗时：" +
          time +
          "毫秒，总页数：" +
          this.totalNum
      );
    });
    }, 100);

  },
};
</script>

<style>
/* @import "pdfh5/css/pdfh5.css"; */

* {
  padding: 0;
  margin: 0;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
}
</style>

pdfh5文档