切换vue-pdf

liangzhen
Commit b31a94d2 authored Jun 06, 2024 by liangzhen
Showing with 173 additions and 29 deletions
src/views/assessChecks/checkCompliance.vue
--- a/src/views/assessChecks/checkCompliance.vue
+++ b/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(() => {
+        setTimeout(() => {
-        //   this.oldQuestionList = JSON.parse(JSON.stringify(this.questionList));
+         if(this.iframeUrl){
-        //   console.log(this.questionList, this.oldQuestionList, "总列表");
+        this.noFile=false
-        // }, 1000);
+        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){
+  beforeRouteLeave(to, from, next) {
-    if(JSON.stringify(this.questionList) ==JSON.stringify(this.oldQuestionList)){
+    if (
-      console.log('相同么')
+      JSON.stringify(this.questionList) == JSON.stringify(this.oldQuestionList)
-      next({replace: true,redirect: '/mainLayout/auxiliaryInspection'})
+    ) {
+      console.log("相同么");
-    }else{
+      next({ replace: true, redirect: "/mainLayout/auxiliaryInspection" });
-      console.log('不同么')
+    } else {
+      console.log("不同么");
      setTimeout(() => {
        this.$confirm("是否保存?", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          distinguishCancelAndClose: true,
          type: "warning",
-      }).then(() => {
+        })
-          this.save('leave');
+          .then(() => {
-          next({replace: true,redirect: '/mainLayout/auxiliaryInspection'})
+            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