在线预览毕业证

src/views/comprehensive/knzzZsgApply/stu.vue

@@ -40,7 +40,8 @@
     <el-dialog @close="getList" title="申请" :visible.sync="applyV" :fullscreen="true" :destroy-on-close="true">
       <TufaApply v-if="applyV" />
     </el-dialog>
-    <el-dialog @close="getList" title="查看" :visible.sync="lookV" :fullscreen="true" :destroy-on-close="true">
+    <el-dialog @close="getList" title="查看" :visible.sync="lookV" :fullscreen="true" :destroy-on-close="true"
+      append-to-body>
       <el-row>
         <el-col :span="12">
           <TufaLook id="printDiv" v-if="lookV" :formData="lookForm" />
@@ -51,6 +52,16 @@
             <el-form-item label="中职毕业证">
               <el-button type="primary" size="mini" icon="el-icon-download" @click="downloadDiploma">下载毕业证
               </el-button>
+
+              <el-button type="primary" size="mini" icon="el-icon-download" @click="lookBiye">预览毕业证
+              </el-button>
+
+              <el-dialog :visible.sync="lookBiyeV" :destroy-on-close="true" append-to-body>
+                <span slot="title">中职毕业证预览</span>
+                <iframe v-if="lookBiyeUrl" :src="lookBiyeUrl" style="width: 100%; height: 80vh;"
+                  frameborder="0"></iframe>
+              </el-dialog>
+
             </el-form-item>
           </el-form>
           <el-button v-print="printContent">打印</el-button>
@@ -354,13 +365,26 @@ export default {
       boolImg,
       printContent: { id: 'printDiv', extraCss: "", extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>' },
       reApplyV: false,
-      reApplyForm: {}
+      reApplyForm: {},
+
+      lookBiyeV: false,
+      lookBiyeUrl: ''
     }
   },
   created() {
     this.getList();
   },
   methods: {
+
+    lookBiye() {
+      const isAbsoluteUrl = this.lookForm.diplomaCertificate.startsWith('http');
+      const pdfUrl = isAbsoluteUrl
+        ? this.lookForm.diplomaCertificate
+        : `${this.baseurl}${this.lookForm.diplomaCertificate}`;
+      this.lookBiyeUrl = pdfUrl;
+      this.lookBiyeV = true;
+    },
+
     handleDiplomaSuccess(response, file, fileList) {
       this.editForm.diplomaCertificate = response.fileName;
       this.upload.fileList = [];