style:证书预览

 <!--
  * @Description: 
  * @Autor: renchao
- * @LastEditTime: 2023-05-17 10:40:23
+ * @LastEditTime: 2023-05-31 16:03:39
 -->
 <template>
   <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px">
@@ -11,7 +11,8 @@
         v-for="(item, index) in headTabBdcqz" :key="index"></el-tab-pane>
     </el-tabs>
     <div class="no-data" v-if="headTabBdcqz.length == 0">暂无数据</div>
-    <img :src="previewImage" class="imgClass">
+    <!-- <img :src="previewImage" class="imgClass"> -->
+    <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
   </div>
 </template>
 
@@ -20,8 +21,6 @@
   import { getSlsqBdcqzList, bdcqzPreview } from "@/api/bdcqz.js"
   export default {
     name: "zsyl",
-    components: {
-    },
     props: {
       formData: {
         type: Object,
@@ -30,6 +29,10 @@
     },
     data () {
       return {
+        imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
+        canvasWidth: 1018,
+        canvasHeight: 720,
+
         loading: false,
         //印刷序列号集合
         ysxlh: [],
@@ -79,28 +82,54 @@
               this.activeName = res.result[0].bsmBdcqz
               this.bdcqz = res.result[0]
               this.headTabBdcqz = res.result
-              this.getBdcqzPreview();
-            } else {
-              this.loading = false
+              this.drawTextOnImage();
             }
           }
-
+          this.loading = false
         })
       },
       //tab表头切换方法
       handleClick (e) {
         this.bdcqz = this.headTabBdcqz[e.index - 0]
         this.activeName = this.headTabBdcqz.bsmBdcqz
-        this.getBdcqzPreview();
-      },
-      getBdcqzPreview () {
-        bdcqzPreview(this.bdcqz).then(res => {
-          this.loading = false
-          let blob = new Blob([res]);
-          let url = window.URL.createObjectURL(blob);
-          this.previewImage = url;
-        })
+        // this.getBdcqzPreview();
+        this.drawTextOnImage()
       },
+      // getBdcqzPreview () {
+      //   bdcqzPreview(this.bdcqz).then(res => {
+      //     this.loading = false
+      //     let blob = new Blob([res]);
+      //     let url = window.URL.createObjectURL(blob);
+      //     this.previewImage = url;
+      //     this.drawTextOnImage()
+      //   })
+      // },
+      drawTextOnImage () {
+        const canvas = this.$refs.canvas;
+        const context = canvas.getContext('2d');
+        const image = new Image();
+        image.onload = () => {
+          context.drawImage(image, 0, 0);
+          context.font = '15px 楷体';
+          context.fillStyle = '#000000';
+          context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56);
+          context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56);
+          context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 180, 56);
+          context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56);
+          context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 138, 97);
+          context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 138, 138);
+          context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 138, 180);
+          context.fillText(this.bdcqz.bdcdyh ? this.bdcqz.bdcdyh : '', 138, 223);
+          context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 138, 263);
+          context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 138, 303);
+          context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346);
+          context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386);
+          context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429);
+          context.fillText(this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk : '', 138, 469);
+          context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 580, 100);
+        }
+        image.src = this.imgSrc;
+      }
     }
   }
 </script>