切换vue-pdf

src/views/assessChecks/checkCompliance.vue

@@ -24,11 +24,36 @@
               :name="item.typeCode"
             >
               <!-- <p style="height:600px"> {{ item.typeText }}</p> -->
-              <iframe
+              <!-- <iframe
                 :src="iframeUrl"
                 frameborder="0"
                 style="width: 80%; height: 60vh; margin: auto; display: block"
-              ></iframe>
+              ></iframe> -->
+              <div v-if="noFile" class="nofileimg">
+                <img src="../../assets/nopdf.png" alt="">
+              </div>
+              <pdf
+                 v-else
+                 ref="morePDF"
+                :src="pdfFile"
+                :page="currentPage"
+                @num-pages="pageCount = $event"
+                @page-loaded="currentPage = $event"
+                @loaded="loadPdf"
+                class="setpdf"
+                
+              ></pdf>
+            
+              <div class="pageButton" v-if="!noFile">
+                <el-button type="primary" @click="changePage(0)"
+                  >上一页</el-button
+                >
+
+                <el-button type="primary" @click="changePage(1)"
+                  >下一页</el-button
+                >
+                <span> {{ currentPage }} / {{ pageCount }} </span>
+              </div>
             </el-tab-pane>
           </el-tabs>
         </div>
@@ -197,9 +222,14 @@ import {
   presignedUrl,
 } from "@/api/index";
 import { MaterialsListKY } from "@/utils/cache";
+import pdf from "vue-pdf";
 export default {
+  components: {
+    pdf,
+  },
   data() {
     return {
+      pdfFile: "",
       dialogImageUrl: "",
       fileList: [],
       evalList: [
@@ -230,14 +260,50 @@ export default {
       limitNum: 1,
       disabled: false,
       oldQuestionList: [], //对比列表
+      numPages: "",
+      pdfFile: "", //pdf文件地址
+      currentPage: 1, // 页码
+      pageCount: 0, // 总页数
+      noFile:true,
     };
   },
+  watch: {},
   mounted() {
     console.log(MaterialsListKY(1), "wwwww");
     this.clqparams = JSON.parse(this.$route.query.clqparams);
     this.init(this.clqparams);
   },
   methods: {
+    // 翻页
+    changePage(val) {
+      if (val === 0 && this.currentPage > 1) {
+        this.currentPage--;
+      }
+      if (val === 1 && this.currentPage < this.pageCount) {
+        this.currentPage++;
+      }
+    },
+    // pdf加载时
+    loadPdf() {
+      this.currentPage = 1; // 加载的时候先加载第一页
+    },
+    getPDFnums(url) {
+      this.loading = true;
+      let loadURL = pdf.createLoadingTask({
+        url: url, //你的pdf地址
+      });
+
+      loadURL.promise
+        .then((pdf) => {
+          console.log(pdf, this.src, "pdfffff");
+          this.pageCount = pdf.numPages;
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.loading = false;
+          this.loadingError = true;
+        });
+    },
     // 放大图片
     handlePictureCardPreview(file) {
       console.log("点击放大");
@@ -304,7 +370,7 @@ export default {
     async init(type) {
       let params = {
         projectStage: this.active * 1 + 1,
-        hgx:"hgx",
+        hgx: "hgx",
         ...type,
       };
       Promise.all([selFile(params), selWtqdFZ(params)]).then(async (res) => {
@@ -327,7 +393,7 @@ export default {
               projectStage: item.questionId,
             };
             let responfx = await selZnfx(paramsFX);
-               counterNum++
+            counterNum++;
             if (respon.data.records && respon.data.records.length > 0) {
               respon.data.records.forEach(async (itemImg) => {
                 if (itemImg.url) {
@@ -373,13 +439,15 @@ export default {
               this.$set(item, "znfxList", []);
               this.$set(item, "fzfxList", []);
             }
-            if(counterNum==this.questionList.length){
+            if (counterNum == this.questionList.length) {
               setTimeout(() => {
-                this.oldQuestionList = JSON.parse(JSON.stringify(this.questionList));
+                this.oldQuestionList = JSON.parse(
+                  JSON.stringify(this.questionList)
+                );
                 console.log(this.questionList, this.oldQuestionList, "总列表");
               }, 300);
             }
-          })
+          });
         }
 
         if (this.urlList.length <= 0) {
@@ -392,30 +460,60 @@ export default {
 
           let resUrl = await presignedUrl(paramsUrl);
 
-          this.iframeUrl = "/pdf/web/viewer.html?file=" + resUrl.msg;
+          // this.iframeUrl = "/pdf/web/viewer.html?file=" + resUrl.msg;
+          this.iframeUrl = resUrl.msg;
+      
         }
-        // setTimeout(() => {
-        //   this.oldQuestionList = JSON.parse(JSON.stringify(this.questionList));
-        //   console.log(this.questionList, this.oldQuestionList, "总列表");
-        // }, 1000);
+        setTimeout(() => {
+         if(this.iframeUrl){
+        this.noFile=false
+        this.pdfFile = this.iframeUrl;
+         this.getPDFnums(this.iframeUrl);
+         }else{
+         console.log('空的')
+         this.noFile=true
+        }
+          this.oldQuestionList = JSON.parse(JSON.stringify(this.questionList));
+          console.log(this.questionList, this.oldQuestionList, "总列表");
+        }, 1000);
       });
     },
     async handleClick(tab) {
       console.log("切换", tab.name, this.urlList);
+      this.noFile=true
+      this.iframeUrl=""
       this.urlList.forEach(async (item) => {
         if (item.typeCode == tab.name) {
           let paramsUrl = {
             fileId: item.id,
             url: item.url,
           };
+          
+          console.log(this.noFile, "333");
           let resUrl = await presignedUrl(paramsUrl);
-          this.iframeUrl = "/pdf/web/viewer.html?file=" + resUrl.msg;
+          this.iframeUrl=resUrl.msg
+          // this.iframeUrl = "/pdf/web/viewer.html?file=" + resUrl.msg;
         } else {
+          console.log('为什么会走这里')
           // this.iframeUrl =""
-          this.iframeUrl = "/nopdf.png";
+          // this.iframeUrl = "/nopdf.png";
+          // this.noFile=true
+         
         }
       });
-      console.log(this.iframeUrl, "this.iframeUrl");
+      
+      setTimeout(() => {
+        if(this.iframeUrl){
+        this.noFile=false
+        this.pdfFile = this.iframeUrl;
+         this.getPDFnums(this.iframeUrl);
+      }else{
+         console.log('空的')
+         this.noFile=true
+      }
+        
+      }, 1000);
+      console.log(this.noFile, "this.iframeUrl");
     },
     change(id) {
       console.log(this.questionList, this.oldQuestionList, "相同么");
@@ -583,35 +681,42 @@ export default {
     //   console.log("来了么222222", this.fileList);
     // },
   },
-  beforeRouteLeave(to,from,next){
-    if(JSON.stringify(this.questionList) ==JSON.stringify(this.oldQuestionList)){
-      console.log('相同么')
-      next({replace: true,redirect: '/mainLayout/auxiliaryInspection'})
-     
-    }else{
-      console.log('不同么')
+  beforeRouteLeave(to, from, next) {
+    if (
+      JSON.stringify(this.questionList) == JSON.stringify(this.oldQuestionList)
+    ) {
+      console.log("相同么");
+      next({ replace: true, redirect: "/mainLayout/auxiliaryInspection" });
+    } else {
+      console.log("不同么");
       setTimeout(() => {
         this.$confirm("是否保存?", "提示", {
           confirmButtonText: "是",
           cancelButtonText: "否",
           distinguishCancelAndClose: true,
           type: "warning",
-      }).then(() => {
-          this.save('leave');
-          next({replace: true,redirect: '/mainLayout/auxiliaryInspection'})
+        })
+          .then(() => {
+            this.save("leave");
+            next({
+              replace: true,
+              redirect: "/mainLayout/auxiliaryInspection",
+            });
           })
           .catch((action) => {
             console.log(action, "actionaction");
             if (action === "cancel") {
-            next({replace: true,redirect: '/mainLayout/auxiliaryInspection'})
+              next({
+                replace: true,
+                redirect: "/mainLayout/auxiliaryInspection",
+              });
             } else {
               // next()
             }
           });
-      },16)
-    }
-
+      }, 16);
     }
+  },
 };
 </script>
 
@@ -824,4 +929,42 @@ export default {
   margin-left: 10px;
   border: none;
 }
+.setpdf {
+  width: 37vw;
+  height: 53vw;
+}
+
+.pageButton {
+  height: 50px;
+  position: absolute;
+  top: 0;
+  right: 50px;
+  line-height: 50px;
+  // background-color: #c0d8f3;
+  // border: 1px solid #5caaf8;
+  // border-radius: 6px;
+  display: flex;
+  padding: 0px 24px;
+  .page {
+    color: #636a70;
+    flex-grow: 1;
+    // border: 1px solid #909;
+    span {
+      margin-right: 20px;
+    }
+  }
+  .scale {
+    // border: 1px solid #909;
+    text-align: right;
+  }
+}
+.nofileimg{
+  width: 500px;
+  height:500px;
+  margin: 50px auto;
+  img{
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>
\ No newline at end of file