预览

src/components/onlineFile/onlineFile.vue

@@ -10,9 +10,8 @@
     >
       <template>
         <iframe
-          style="width: 100%; height: 57vh"
+          style="width: 100%; height: 57vh; border: none;"
           :src="codeUri"
-          border="0"
         ></iframe>
       </template>
     </Modal>

src/views/lease/sign.vue

@@ -1471,7 +1471,12 @@ export default {
         if (i.edit_input === "file") {
         }
         if (i.edit_input === "files") {
-          this.file[i.field] = res[`${i.field}_upload_details`];
+          this.file[i.field] = res[`${i.field}_upload_details`] ? res[`${i.field}_upload_details`].map(i => ({
+            url: i.url,
+            name: i.original_name,
+            original_name: i.original_name,
+            response: i
+          })) : []
         }
       });
       this.form = Object.assign({}, this.form);

src/views/preview/index.vue

@@ -7,7 +7,13 @@
       <VueOfficeExcel :src="url" style="height: 100vh;" />
     </template>
     <template v-else-if="type === 'pdf'">
-      <VueOfficePdf :src="url" style="height: 100vh;" />
+      <div style="height: 100vh;" class="pdf-preview">
+        <VueOfficePdf ref="pdfWrapper" :src="url" />
+        <div class="icon-scale">
+          <span @click="scaleD"><i class="el-icon-zoom-in"></i></span>
+          <span @click="scaleX"><i class="el-icon-zoom-out"></i></span>
+        </div>
+      </div>
     </template>
     <template v-else-if="['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].indexOf(type) !== -1">
       <el-image ref="elImage" fit="contain" :preview-src-list="[url]" :src="url" style="width: 100vw;height: 100vh;" alt="" @load="loadImg" />
@@ -42,7 +48,8 @@ export default {
   data() {
     return {
       url: '',
-      type: ''
+      type: '',
+      scale: 1
     }
   },
   computed: {},
@@ -55,6 +62,21 @@ export default {
     }
   },
   methods: {
+    //放大
+    scaleD() {
+      this.scale += 0.1;
+      this.$refs.pdfWrapper.$el.style.transform = "scale(" + this.scale + ")";
+      this.$refs.pdfWrapper.$el.style.transformOrigin = "top center";
+    },
+
+    //缩小
+    scaleX() {
+      if (this.scale === 1) {
+        return;
+      }
+      this.scale += -0.1;
+      this.$refs.pdfWrapper.$el.style.transform = "scale(" + this.scale + ")";
+    },
     loadImg() {
       this.$refs['elImage']?.$el?.children[0].click()
       this.$nextTick(() => {
@@ -81,5 +103,29 @@ export default {
 .container {
   height: 100vh;
   width: 100vw;
+
+  .pdf-preview {
+    position: relative;
+
+    .icon-scale {
+      width: 14vw;
+      background: #999;
+      border-radius: 60px;
+      position: fixed;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      i {
+        font-size: 22px;
+        font-weight: bold;
+        color: #fff;
+        margin: 4px 10px;
+        cursor: pointer;
+      }
+    }
+  }
 }
 </style>