vue中pdf在线预览-全页预览

1.安装vue-pdf

npm install --save vue-pdf

2.引入vue-pdf

import pdf from "vue-pdf";
<div class="content" ref="content">
 <pdf
 ref="pdf"
   v-for="i in numPages"
   :key="i"
   :src="url"
   :page="i"
 ></pdf>
 </div>
components: {
    pdf
}
methods:{
getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    }
}

3.放大缩小功能

scrollTo(e: number) {
      let contentEl = this.$refs.content as HTMLElement;
      let contentElWidth = contentEl.offsetWidth;
      let scrollWidth = (contentElWidth * ((e - 100) / 100)) / 2;
      contentEl.scrollLeft = scrollWidth;
      console.log(scrollWidth);
    },
    scaleD(e: number) {
      let el = this.$refs.pdf as [];
      el.forEach((element) => {
        element.$el.style.width = e + "%";
      });
      this.scrollTo(e);	
    },
    scaleX(e: number) {
      let el = this.$refs.pdf as [];
      el.forEach((element) => {
        element.$el.style.width = e + "%";
      });
      this.scrollTo(e);
    },

4.完毕