style:证书预览

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-08-16 17:02:36
+ * @LastEditTime: 2023-08-16 17:31:25
 -->
 <template>
   <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
@@ -12,8 +12,8 @@
       </el-tab-pane>
     </el-tabs>
     <el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty>
-    <canvas ref="zs" width="1000" v-show="headTabBdcqz[0]&&headTabBdcqz[0].bdcqzlx==1" height="700"></canvas>
-    <canvas ref="zm" width="1180" v-show="headTabBdcqz[0]&&headTabBdcqz[0].bdcqzlx!=1" height="780"></canvas>
+    <canvas ref="zs" width="1024" v-show="headTabBdcqz[0]&&headTabBdcqz[0].bdcqzlx==1" height="739"></canvas>
+    <canvas ref="zm" width="1169" v-show="headTabBdcqz[0]&&headTabBdcqz[0].bdcqzlx!=1" height="828"></canvas>
   </div>
 </template>
 
@@ -266,7 +266,7 @@
         const image = new Image();
         image.onload = () => {
           context.drawImage(image, 0, 0);
-          context.font = '18px 楷体';
+          context.font = '16px 楷体';
           context.fillStyle = '#000000';
           // ysxlh
           context.fillText(this.bdcqz.ysxlh ? this.bdcqz.ysxlh : '', 280, 712);
@@ -285,9 +285,57 @@
           context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228);
           // 义务人
           context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275);
-          context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 775, 325);
+
+          let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : [];
+          if (lines2.length > 22) {
+            lines2.forEach((line, index) => {
+              const y = 305 + (index * 20); // 每行文本的垂直位置
+              let currentLine = '';
+              let arr = [];
+              for (let word of line) {
+                const testLine = currentLine + word;
+                const lineWidth = context.measureText(testLine).width;
+                if (lineWidth <= 360) {
+                  currentLine = testLine;
+                } else {
+                  arr.push(currentLine);
+                  currentLine = word;
+                }
+              }
+              arr.push(currentLine);
+              arr.forEach((line, index) => {
+                context.fillText(line, 775, y + (index * 20)); // 调整行高
+              })
+            })
+          } else {
+            lines2.forEach((line, index) => {
+              const y = 325 + (index * 20); // 每行文本的垂直位置
+              let currentLine = '';
+              let arr = [];
+              for (let word of line) {
+                const testLine = currentLine + word;
+                const lineWidth = context.measureText(testLine).width;
+                if (lineWidth <= 360) {
+                  currentLine = testLine;
+                } else {
+                  arr.push(currentLine);
+                  currentLine = word;
+                }
+              }
+              arr.push(currentLine);
+              arr.forEach((line, index) => {
+                context.fillText(line, 775, y + (index * 20)); // 调整行高
+              })
+            })
+          }
+
+
           // bdcdyh
-          context.fillText(this.bdcqz.bdcdyh ? this.bdcqz.bdcdyh : '', 775, 373);
+          this.bdcdyh = this.bdcqz.bdcdyh.slice(0, 6) + ' ' + this.bdcqz.bdcdyh.slice(6, 12) + ' ' +
+            this.bdcqz.bdcdyh.slice(12, 19) + ' ' + this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length)
+          context.fillText(this.bdcdyh ? this.bdcdyh : '', 775, 373);
+
+
           // qlqtzk
           const maxWidth = 280; // 最大宽度限制
           let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];