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

<template><!--pdf连接分页处理-->
  <div class="pdf-perView" id="pdf-perView">
    <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
      			v-for="i in showPages"
      			:key="i"
      			:src="src"
      			:page="i"
            @progress="loadedRatio = $event"
            @page-loaded="loadedPageHandle"
            @loaded="loadPdfHandle"
      			style="display: inline-block; width:100%;">
            <div>每行的间隔内容</div>
      </pdf>
      <!-- <pdf
        ref="pdf"
        :src="pdfUrl"
        :page="currentPage"
        @progress="loadedRatio = $event"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
        @link-clicked="currentPage = $event">
      </pdf> -->
    </div>
    <div v-if="totalPages>initNum" class="pdf-footer pagination-div" >
      <!-- <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> -->
      <el-button type="primary" @click="clickMore()"  v-if="moreState == 1">加载更多</el-button>
    </div>
    <!-- <div v-if="likeBox" class="xcontent postfixt-bot">
      <div class="postfixt-bot-box">
        <div style="display:inline-block">
           <interactBar  :data="data" :type="3" :comments="false" :shares="true"></interactBar>
        </div>
        <div style="display:inline-block;margin: 0 20px;">
          <el-button type="primary" @click="goTop()">返回顶部</el-button>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script >
import interactBar from '@/components/Portal/interactBar.vue';
import pdf from "vue-pdf";
export default {
  components: { pdf,interactBar },
  props: {
    filePath: {
      type: String,
      default: "",
    },
    scrollToID: {
      type: String,
      default: "pdf-perView",
    },
    autoScroll: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      src: "",
      showPages: undefined,
      totalPages:0,
      initNum:3,
      scale: 100, //放大系数
      loadedRatio:0,// 加载进度
      showProgress:true,
      moreState:1,// 1 加载更多 2 加载中 3无数据
     isscroll:false,
     pdfpage:0,
    };
  },
  mounted() {
      // /case/demo.pdf
      if(this.filePath){
        this.loadInitPdf(this.filePath);
      }
      window.addEventListener(
      "scroll",
      this.handleScroll
    );
  },
  beforeDestroy(){
    window.removeEventListener("scroll",this.handleScroll);
  },
  watch:{
    filePath(newVal){
      if(newVal){
       this.loadInitPdf(newVal);
      }
    },
    loadedRatio(newVal){
      // 直接使用loadedRatio控制进度条没有加载效果
      if(newVal == 1){
        let that = this;
        setTimeout(function(){
          that.showProgress = false;
        }, 500)
      }
    }
  },
  methods: {
    goTop() {
     document.documentElement.scrollTop = 0;
    },
    loadProgress(e){
       console.log(e,'loadProgress');
    },
    loadedPageHandle(e){
       this.pdfpage = e;
    },
    loadPdfHandle(e){
       console.log(e,'loadPdfHandle');
    },
    clickMore(){
       if(this.totalPages>this.showPages){
          this.showPages++;
       }
      this.isscroll = true;
    },
    //加载页面
    loadInitPdf(url) {
        let loadingTask = pdf.createLoadingTask(url);
        this.src=loadingTask;
        loadingTask.promise.then((pdf) =>{
            this.totalPages=pdf.numPages;
            if(pdf.numPages>this.initNum){
              this.showPages = this.initNum;
            } else{
              this.showPages =pdf.numPages;
            }
          }).catch((err) =>{
            this.$message.error("加载内容失败,请联系管理员");
          });
    },

   handleScroll() {
      let el_anking = document.querySelector('#case-list-content');
      let innerHeight = document.querySelector('#pdf-perView').clientHeight
      let outerHeight = document.documentElement.clientHeight
      let scrollTop = document.documentElement.scrollTop
      let $this=this;
      if(this.isscroll){
        this.showPages++
        this.moreState = 2;
          // this.debounce(this.loadInitPdf($this.filePath),5000);
          //  this.debounce(,200000);
      }
     if(this.pdfpage >= this.totalPages){
        this.isscroll = false;
        this.moreState = 3;
     }
       if(this.showPages >= this.totalPages){
        this.isscroll = false;
        this.moreState = 3;
     }
        //  if(scrollTop > 400) {
        //   document.querySelector('#articleAnking').style.cssText = "position: fixed;top: 0;width:242.5px";
        // } else {
        //   document.querySelector('#articleAnking').style.cssText = "position: static";
        // }
  },
    debounce(func, wait) {// 非立即执行
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
},
    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) + "%";
    }
  },
};
</script>

<style scoped lang="scss">
// .postfixt-bot{
//   height: 60px;
//   line-height: 60px;
//   width: 750px;
//   position: fixed;
//   bottom: 0;
//   background-color: #fff;
//   border: 1px solid #eee;
//   z-index: 999;
//   .postfixt-bot-box{
//     text-align: right;
//   }
// }
.pdf-perView {
  .pdf-box {
    min-height: 300px;
    width: 100%;
    //border: 1px solid #dfdfdf;
    overflow-y: hidden;
    overflow-x: hidden;
    >span{
      margin-bottom: 20px;
    }
  }
  .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;
  }
  .el-progress .el-progress-bar .el-progress-bar__outer{
    background-color: #FFFFFF;
  }
}
</style>