vue-pdf插件的使用支持从中心位置放大缩小

第一步：下载

"vue-pdf": "^4.2.0",

第二步：在页面中引入注册

import pdf from "vue-pdf";
 components: {
    pdf,
  },

第三步：开始使用

<template>
<div>
 <main>
      <el-card>
        <div 
          class="main-pdfbox"
          :style="{ width: scale + '%' }">

         <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i"></pdf>
        </div>
         <div class="scaleButton">
            <p class="el-icon-plus" @click="plus"></p>
            <p class="el-icon-minus" @click="minus"></p>

            <!-- <img src="../../../assets/icon_fd.png" title="放大" @click="scaleD" />
                <img src="../../../assets/icon_sx.png" title="缩写" @click="scaleX" /> -->
          </div>
      </el-card>
    </main>
</div>
</template>

<script>
import pdf from "vue-pdf";
export default {
components: {
    pdf,
  },

data(){
return{
numPages: 1,
      pdfSrc: "",
      detail:{},
       scale: 86,
      scaleAdd: 10,
};
},
  methods: {
       plus() {
        let { scale } = this;
      scale += this.scaleAdd;
      scale = scale > 1000 ? 1000 : scale;
      // this.showToastFn();
      this.scale = scale;
    },
    minus() {
        let { scale } = this;
      scale -= this.scaleAdd;
      scale = scale < 10 ? 10 : scale;
      // this.showToastFn();
      this.scale = scale;
    },
    pdfTask(url) {
      var loadingTask = pdf.createLoadingTask({
        url: url,
        cMapUrl: "../../../../../static/cmaps/",
        cMapPacked: true,
      });
      loadingTask.promise
        .then((pdf) => {
          this.pdfSrc = loadingTask;
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf加载失败");
        });
    },
    getlist() {
    //发请求获取数据
      getDetail().then((res) => {
       if (
          this.detail.fileList.length > 0 &&
          /\.pdf/gi.test(this.detail.fileList[0].fileName)
        ) {
          const data = this.detail.fileList[0];
          this.pdfTask(this.baseUrl + "/common/load/" +data.id);
        }
      });
    },
  },
}
</script>

补充写法

<template>
  <div class="pdf-container" @scroll="scroll">
    11111
    <pdf v-for="i in numPages" :key="i" :src="src" :page="i"></pdf>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  data () {
    return {
      numPages: 1,
      pdfSrc: '',
      currentUrl: '',
      src: ''
    }
  },
  methods: {
   scroll (e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target
      if (scrollTop + clientHeight === scrollHeight) {
        console.log('到底啦～')
        this.isFlag = false
      }
    },
    pdfPreview () {
      const loadTask = pdf.createLoadingTask(this.currentUrl)
      loadTask.promise.then((pdf) => {
        this.src = loadTask
        this.numPages = pdf.numPages
        console.log()
      }).catch(() => { })
    }
  },
  mounted () {
    this.currentUrl = window.location.origin + '/dsd.pdf#toolbar=0'
    this.pdfPreview()
  }
}
</script>
<style lang="scss" scoped>
 .pdf-container {
    height: 100%;
    overflow-y: scroll;
    // background-color: #68b687;
  }
</style>