learning-system-portal/src/components/PdfPreview/index.vue

<template>
  <div class="pdf-perView" id="pdf-perView">
    <div class="pdf-header">
      <el-button icon="el-icon-arrow-left" @click="prePage('header')" :disabled="loadedRatio !== 1"></el-button>
      <span v-if="loadedRatio !== 1" style="margin:0 10px;">0 / 0</span>
      <span v-else style="margin:0 10px;">{{ currentPage }} / {{ pageCount }}</span>
      <el-button @click="nextPage('header')" :disabled="loadedRatio !== 1" icon="el-icon-arrow-right"></el-button>
    </div>
    <div class="pdf-box">
      <transition name="progress"> 
        <el-progress v-if="showProgress" :percentage="Math.floor(loadedRatio * 100)" :text-inside="true" :show-text="false"></el-progress>
      </transition>
      <pdf
        ref="pdf"
        :src="src"
        :page="currentPage"
        @progress="loadedRatio = $event"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
        @link-clicked="currentPage = $event"></pdf>
    </div>
    <div class="pdf-footer">
      <el-button icon="el-icon-arrow-left" @click="prePage('footer')" :disabled="loadedRatio !== 1"></el-button>
      <span v-if="loadedRatio !== 1" style="margin:0 10px;">0 / 0</span>
      <span v-else style="margin:0 10px;">{{ currentPage }} / {{ pageCount }}</span>
      <el-button @click="nextPage('footer')" :disabled="loadedRatio !== 1" icon="el-icon-arrow-right"></el-button>
    </div>
  </div>
</template>

<script >
import pdf from "vue-pdf";
export default {
  components: { pdf },
  props: {
    filePath: {
      type: String,
      default: "",
    },
    scrollToID: {
      type: String,
      default: "pdf-perView",
    },
    autoScroll: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      numPages: "",
      src: "",
      pageCount: 0,
      currentPage: 0,
      scale: 100, //放大系数      
      // 加载进度
      loadedRatio:0,
      showProgress:true,
    };
  },
  mounted() {
      //this.getNumPages(this.filePath);
      this.initSrc(this.filePath);
  },
  watch:{
    filePath(newVal){
        //this.getNumPages(newVal);
        this.initSrc(newVal);
    },
    loadedRatio(newVal){
      // 直接使用loadedRatio控制进度条没有加载效果
      if(newVal == 1){
        let that = this;
        setTimeout(function(){
          that.showProgress = false;
        }, 500)
      }
    }
  },
  methods: {
    // 加载所有页
    // getNumPages(url) {
    //   if(url && url.indexOf('.pdf')>-1){
    //     let loadingTask = pdf.createLoadingTask(url);
    //     let that = this;
    //     loadingTask.promise
    //       .then((pdf) => {
    //         console.log(loadingTask)
    //         that.src = loadingTask;
    //         that.numPages = pdf.numPages;
    //       })
    //       .catch((err) => {
    //         console.error("pdf加载失败");
    //       });
    //   }
    // },
    initSrc(url){
      if(url && url.indexOf('.pdf')>-1){
        this.src = url;
      }
    },
    prePage(type) {
      if (this.currentPage > 1) {
        this.currentPage--;
        if(type === 'footer'){
          this.scrollTo();
        }
      }
    },
    nextPage(type) {
      if (this.currentPage < this.pageCount) {
        this.currentPage++;
        if(type === 'footer'){
          this.scrollTo();
        }
      }
    },
    scrollTo(){
      if(!this.autoScroll){
        return;
      }
      document.getElementById(this.scrollToID).scrollIntoView({ block: 'start', behavior: 'smooth' })
    },
    //放大
    scaleD() {
      if (this.scale == 200) {
        return;
      }
      this.scale += 5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },

    //缩小
    scaleX() {
      if (this.scale == 50) {
        return;
      }
      this.scale += -5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    },
  },
};
</script>

<style scoped lang="scss">
.pdf-perView {
  .pdf-box {
    height: 100%;
    width: 100%;
    border: 1px solid #dfdfdf;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .pdf-header,.pdf-footer {
    border: 1px solid #dfdfdf;
    background: #dfdfdf;
    text-align: center;
    line-height: 40px;
  }
  /* ------------------- 进度条 ------------------- */
  //类名：隐藏到显示过程所需要的时间
  .progress-leave-active{
    transition: opacity 2s;
  }
  .progress-leave-to{
    opacity: 0;
  }
}
</style>