vue项目pdf预览插件----pdf

应用场景

需要展示的pdf文件内容，通过按钮进行上下页的展示与翻页

解决办法

1.安装vue-pdf：npm i vue-pdf --save -dev
2.具体实现：

<template>
  <div class="pdf" v-show="fileType === 'pdf'">
    <pdf
      ref="pdf"
      :src="pdfUrl"
      :page="currentPage"
      @num-pages="pageCount=$event"
      @page-loaded="currentPage=$event"
      @loaded="loadPdfHandler">
    </pdf>

    <div class="bottom-btn" >
      <p class="arrow">
        <span @click="changePdfPage(0)" class="turn">上一页</span>
        {{currentPage}} / {{pageCount}}
        <span @click="changePdfPage(1)" class="turn">下一页</span>
      </p>
    </div>
  </div>

</template>
<script>
import pdf from "vue-pdf";
export default {
  components:{
      pdf
  },
  data() {
    return {
      pdfUrl:'',// pdf文件地址
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: 'pdf', // 文件类型
　 } 
  },
  mounted(){
    this.title = this.$route.query.data.name
    const toast = this.$toast.loading({
      duration: 0,
      message: '加载中...',
      forbidClick: true,
      loadingType: 'spinner'
    });
    
    this.pdfUrl = this.$route.query.data.operationUrl

  },
  methods:{
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage (val) {
      // console.log(val)
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },
    loadPdfHandler(e){
      this.$toast.clear();
      this.currentPage = 1 // 加载的时候先加载第一页
    }
  }
};
</script>
<style scoped>
  .pdf{
    position: relative;
    margin-bottom: 60px;
  }
  .bottom-btn{
    position: fixed;
    width: 80%;
    height: 120px;
    bottom: 0;
    padding: 0 10%;
    background: #ffffff;
    z-index: 999;
  }
.arrow{
  text-align: center;
}
</style>