单据识别替换为图片

src/views/Business/Ditdck/OcrInvoicesRecognition.vue

@@ -17,7 +17,14 @@
     <div class="invoices-recognition">
       <div class="invoices-area">
         <div class="file-name">{{ fileName }}</div>
-        <iframe class="pdf-file" :src="fileUrl" type="application/pdf" />
+        <!-- <iframe class="pdf-file" :src="fileUrl" type="application/pdf" /> -->
+        <div class="pdf-file">
+          <el-scrollbar :style="{ height: imgContainerHeight + 'px' }">
+            <div style="height: 100%;display: flex;justify-content: center;">
+              <img :src="fileUrl" alt="单据" style="display: block;" />
+            </div>
+          </el-scrollbar>
+        </div>
       </div>
       <div class="recognition-area">
         <el-form
@@ -28,7 +35,12 @@
           <el-col :span="24">
             <el-form-item label="">
               <c-select v-model="invoicesData.type">
-                <el-option v-for="(item, idx) in invoicesTypeOptions" :key="idx" :label="item.label" :value="item.value"></el-option>
+                <el-option
+                  v-for="(item, idx) in invoicesTypeOptions"
+                  :key="idx"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
               </c-select>
             </el-form-item>
           </el-col>
@@ -45,7 +57,12 @@
           <el-col :span="24">
             <el-form-item label="是否正本">
               <c-select v-model="invoicesData.original" style="width: 100%;">
-                  <el-option v-for="(item, idx) in invoicesOriginalOptions" :key="idx" :label="item.label" :value="item.value"></el-option>
+                <el-option
+                  v-for="(item, idx) in invoicesOriginalOptions"
+                  :key="idx"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
               </c-select>
             </el-form-item>
           </el-col>
@@ -65,7 +82,8 @@ export default {
       show: false,
       fileName: "KZ3500220597AA-001.pdf",
       // fileUrl: "/invoice.pdf",
-      fileUrl: "assets/invoice.pdf",
+      fileUrl: require("~/assets/KZ3500220597AA-001.pdf.jpg"),
+      imgContainerHeight: 0,
       invoicesTypeOptions: [
         { label: "商业发票", value: "SYFP" },
         { label: "个人发票", value: "GRFP" },
@@ -78,20 +96,34 @@ export default {
         type: "SYFP",
         date: "5 DEC 2021",
         amount: "USD 223000.00",
-        original: 1
+        original: 1,
+      },
+    };
+  },
+  watch: {
+    show(newVal, oldVal) {
+      if (!this.imgContainerHeight) {
+        if (newVal) {
+          this.$nextTick(() => {
+            const ele = this.$el.querySelector(
+              ".invoices-recognition .invoices-area .pdf-file"
+            );
+            this.imgContainerHeight = ele.clientHeight;
+          });
         }
       }
     },
+  },
   methods: {
     save() {
-      this.$emit("confirm")
+      this.$emit("confirm");
       this.close();
     },
     close() {
-      this.show = false
-    }
-  }
-}
+      this.show = false;
+    },
+  },
+};
 </script>
 
 <style>
@@ -101,12 +133,16 @@ export default {
   flex-direction: column;
   margin-bottom: unset;
 }
-.ocr-invoices-dialog .el-dialog__header, .ocr-invoices-dialog .el-dialog__body {
+.ocr-invoices-dialog .el-dialog__header,
+.ocr-invoices-dialog .el-dialog__body {
   padding: 0;
 }
 .ocr-invoices-dialog .el-dialog__body {
   flex: 1;
 }
+.ocr-invoices-dialog .el-scrollbar__wrap {
+  overflow-x: auto;
+}
 </style>
 
 <style scoped>
@@ -124,14 +160,17 @@ export default {
   box-sizing: border-box;
 }
 .invoices-area {
+  height: 100%;
   width: 50%;
   border-right: 1px solid #babec1;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   padding: 0 10px;
+  overflow: hidden;
 }
 .recognition-area {
+  height: 100%;
   width: 50%;
   border-left: 1px solid #babec1;
   box-sizing: border-box;