2022年5月29日从svn移到git

src/components/PdfPreview/index.vue

@@ -0,0 +1,173 @@
+<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>