H5 view pdf file (pdfh5)

I use pdfh5 to view the pdf files in H5

-- Use the pdfh5 plugin to open pdf files

-- The following are two ways to use, method 1 and method 2 are both available (but I have a freeze when using method 2, probably because lazy loading is not enabled)

-- The on in the second method can print out the error message

 Instructions 

        1. Introduce pdfh5

npm install pdfh5

        2. Use the following code in the vue file (create a new file here, and then open the pdf file in the current new page)

html

<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>

css 

<style>
.wrap {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/* html,
body, */
#demo {
  width: 100%;
  height: 100%;
}
// 这里高度没有撑满
.viewerContainer {
  height: 100%;
}
</style>

 Problem: Problems encountered in H5 - problems encountered when running locally 

1. When using the local relative path, the pdf cannot be opened

      == Reason: It should be possible to use the local path, but it may not be opened because it is requested locally, and then there is no request back. There is no test here whether it can be opened online with a relative path

2. Report a cross-domain error

        == Reason: It may be because the request header is the local localhost when requesting, so there is a cross-domain. When the code is put into the test environment to run, the address of the test environment and the request address of the pdf link are the same domain name. So you can request it when you are online, but if it is different, you need to let the backend configure the request header