vue 移动端app预览和保存pdf踩坑-pdf5实现

先说pdf，这个集成和实现都很简单，但是有个问题，页数多的话，一直现在加载中，并不能加载成功，始终在第一页，这个问题暂时没解决，有大佬知道的话可以指点一下

<template>
  <div style="height: 100vh">
     <div id="pdf-content" style="height: 60vh"></div>
      <div class="div-task-button">
        <div class="tasks-button" @click="downloadPdf">保存</div>
      </div>
    </div>
  </div>
</template>

// import Pdfh5 from "pdfh5";
// import "pdfh5/css/pdfh5.css";
import pdf from "vue-pdf";
export default {
  name: "Pdfh5",
  data() {
    return {
      pdfh5: null,
      title: "通知单",
   
      pdfUrl: "", // 如果引入本地pdf文件，需要将pdf放在public文件夹下，引用时使用绝对路径（/：表示public文件夹）
    };
  },

  mounted() {
    try {
      let orderItem = JSON.parse(this.$route.query.item);
      this.title = orderItem.title;
      this.pdfUrl = orderItem.pdfUrl ;
   
    } catch (e) {
      console.log(e)
    }

  
    this.initPdf();
  },
  methods: {
    initPdf() {
      this.pdfh5 = new Pdfh5("#pdf-content", {
        pdfurl: this.pdfUrl, // pdf 地址，请求的地址需要为线上的地址，测试的本地的地址是不可以的
        lazy: true, // 是否懒加载
        withCredentials: true,
        renderType: "svg",
        maxZoom: 3, //手势缩放最大倍数 默认3
        scrollEnable: true, //是否允许pdf滚动
        zoomEnable: true, //是否允许pdf手势缩放
      });
    },

    downloadPdf() {
      console.log("开始下载");
      let body = {
        url: this.pdfUrl,
      };
      if (config.isAndroid && window.hesAndroidNative) {
        window.hesAndroidNative.openSystemBrowser(JSON.stringify(body));
      } else if (config.isIos && window.webkit) {
        window.webkit.messageHandlers.openSystemBrowser.postMessage(
          JSON.stringify(body)
        );
      } else {
      }
    },
  },
};
</script>