pdf调整

src/components/PdfPreview/view.vue

@@ -0,0 +1,197 @@
+<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 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> -->
+      <el-button type="primary" @click="clickMore()">加载更多</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 {
+      src: "",
+      showPages: undefined,
+      totalPages:0,
+      scale: 100, //放大系数
+      loadedRatio:0,// 加载进度
+      showProgress:true,
+    };
+  },
+  mounted() {
+      // /case/demo.pdf
+      let pdfPath=this.$Constants.fileBaseUrl+'/case/demo.pdf';
+      this.loadInitPdf(pdfPath);
+      //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: {
+    loadProgress(e){
+      console.log(e,'loadProgress');
+    },
+    loadedPageHandle(e){
+      console.log(e,'loadedPageHandle');
+    },
+    loadPdfHandle(e){
+      console.log(e,'loadPdfHandle');
+    },
+    clickMore(){
+       if(this.totalPages>this.showPages){
+           this.showPages++;
+       }
+    },
+    //加载页面
+    loadInitPdf(url) {
+      if(url && url.indexOf('.pdf')>-1){
+        let loadingTask = pdf.createLoadingTask(url);
+        this.src=loadingTask;
+        loadingTask.promise.then((pdf) =>{
+            this.totalPages=pdf.numPages;
+            if(pdf.numPages>3){
+              this.showPages = 3;
+            }else{
+              this.showPages =pdf.numPages;
+            }
+          }).catch((err) =>{
+            this.$message.error("加载内容失败,请联系管理员");
+          });
+      }
+    },
+    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) + "%";
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.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>

src/components/PortalHeader.vue

@@ -7,7 +7,7 @@
           <div style="display: flex;justify-content: space-around;margin-left: 20px;">
             <div class="top-nav" :class="current == 'index' ? 'current-nav' : ''"><router-link to="/index">首页</router-link></div>
             <div class="top-nav" :class="current == 'course' ? 'current-nav' : ''"><router-link to="/course">课程</router-link></div>
-            <!-- <div class="top-nav" :class="current == 'case' ? 'current-nav' : ''"><router-link to="/case">案例</router-link></div> -->
+            <div class="top-nav" :class="current == 'case' ? 'current-nav' : ''"><router-link to="/case">案例</router-link></div>
             <div class="top-nav" :class="current == 'article' ? 'current-nav' : ''"><router-link to="/article">文章</router-link></div>
             <div class="top-nav" :class="current == 'qa' ? 'current-nav' : ''"><router-link to="/qa">问答</router-link></div>
             <div class="top-nav">

src/views/portal/case/Detail.vue

@@ -6,7 +6,7 @@
         <el-breadcrumb-item :to="{ path: '/case' }">案例列表</el-breadcrumb-item>
         <el-breadcrumb-item>案例详情</el-breadcrumb-item>
       </el-breadcrumb>
-       <div class="xrow" style="display: flex;justify-content: space-between;">
+      <div class="xrow" style="display: flex;justify-content: space-between;">
           <div style="flex: 1;">
       <el-row :gutter="10">
         <el-col :span="24">
@@ -70,7 +70,7 @@
 import { mapGetters } from 'vuex';
 import portalHeader from '@/components/PortalHeader.vue';
 import portalFooter from '@/components/PortalFooter.vue';
-import pdfPreview from '@/components/PdfPreview/index.vue';
+import pdfPreview from '@/components/PdfPreview/view.vue';
 
 import interactBar from '@/components/Portal/interactBar.vue';
 import comments from '@/components/Portal/comments.vue';
@@ -195,7 +195,7 @@ export default {
 .jianjie {
   margin: 15px 0;
   background-color: #fff;
-  padding: 20px 100px 10px 100px;
+  padding: 0px 2px 10px 2px;
   .content {
     padding: 10px 0;
     line-height: 25px;