vue-pdf 在vue中展示pdf

标签：el vue 展示 scale pdf 方法

老规矩先看效果图：

 

这玩意的坑是相当的多，如果只是单纯的网页浏览，真心建议直接使用 <iframe> 来进行嵌入pdf吧，省心也省事

我这边的web页面是需要放到客户端里面的，然后由于某些原因吧，不支持显示iframe嵌入的pdf网页，只能使用vue-pdf来进行实现了

下面就说一下实现步骤吧，我尽量说的通俗易懂一些：

首先呢，我们需要下载vue-pdf：（我的版本是4.3.0）
npm install --save vue-pdf

然后，我们去到需要展示的vue页面，引入vue-pdf
import pdf from "vue-pdf"

  在components中注册一下   components: {pdf}

还是贴上代码吧，不然谁看谁蒙圈 

1.template中的pdf代码

　　　<div class="zsqy">
        <pdf
          v-for="item in numPages"
          :rotate="pageRotate"
          :key="item"
          :src="src"
          :page="item"
          ref="pdf"
        />
      </div>

2.引入、注册代码：（这块在上面写了 ）

 3.data中vue-pdf我用的相关参数：

 4.在crreated中调用：

 

created() {
    this.src = pdf.createLoadingTask("https://cw.picimos.com/site/guihua.pdf");
    this.loadPdfHandler();
  },

 loadPdfHandler() {       this.src.promise.then((pdf) => {         this.numPages = pdf.numPages;       });     },

值得一提的是网上有很多写这个方法的时候，把promise去掉了，非常多。。。

 

    //旋转方法，我写的是顺时针，只写了一个按钮，有需求可以写两个
    setXz() {
      this.pageRotate += 90;
    },
    //放大方法，这个也有个搞笑的，网上有些人 把pdf[0].$el写成pdf.$el
    setFd() {
      this.scale += 15;
      this.$refs.pdf[0].$el.style.width = parseInt(this.scale) + "%";
    },
    //缩小方法
　　　　setSx() {

     　　 // scale 是百分百展示 不建议缩放       　　if (this.scale == 100) {      　　   return;     　　  }     　　  this.scale += -15;    　　   this.$refs.pdf[0].$el.style.width = parseInt(this.scale) + "%";    　　 },

 

我这里用到的方法不是很多，只用到了放大缩小旋转，其他功能由于项目不需要我也就没有去实现。

还有一些细微的坑！ 由于vue-pdf是基于pdfjs来进行封装的，导致我们打包的时候会多出来2个worker.js和map文件，这两个文件需要在服务器上运行时才可以，不然是读取不到本地文件的，

研究了半天源码，也没解决

标签：el,vue,展示,scale,pdf,方法
From： https://www.cnblogs.com/a973692898/p/17614476.html