style:证书预览

 <!--
 <!--
  * @Description:
  * @Description:
  * @Autor: renchao
  * @Autor: renchao
- * @LastEditTime: 2023-08-25 09:23:55
+ * @LastEditTime: 2023-08-25 09:31:57
 -->
 -->
 <template>
 <template>
   <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
   <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
@@ -148,7 +148,7 @@
           context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
           context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
           // context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 129, 429);
           // context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 129, 429);
           // qlqtzk
           // qlqtzk
-          const maxWidth = 336; // 最大宽度限制
+          const maxWidth = 333; // 最大宽度限制
           let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
           let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
           lines.forEach((line, index) => {
           lines.forEach((line, index) => {
             const y = 463 + (index * 40); // 每行文本的垂直位置
             const y = 463 + (index * 40); // 每行文本的垂直位置
@@ -190,6 +190,7 @@
             })
             })
           })
           })
           let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : [];
           let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : [];
+          if (lines3.length >= 22) {
             lines3.forEach((line, index) => {
             lines3.forEach((line, index) => {
               const y = 423 + (index * 27); // 每行文本的垂直位置
               const y = 423 + (index * 27); // 每行文本的垂直位置
               let currentLine = '';
               let currentLine = '';
@@ -209,6 +210,27 @@
                 context.fillText(line, 129, y + (index * 20)); // 调整行高
                 context.fillText(line, 129, y + (index * 20)); // 调整行高
               })
               })
             })
             })
+          } else {
+            lines3.forEach((line, index) => {
+              const y = 430 + (index * 27); // 每行文本的垂直位置
+              let currentLine = '';
+              let arr = [];
+              for (let word of line) {
+                const testLine = currentLine + word;
+                const lineWidth = context.measureText(testLine).width;
+                if (lineWidth <= 315) {
+                  currentLine = testLine;
+                } else {
+                  arr.push(currentLine);
+                  currentLine = word;
+                }
+              }
+              arr.push(currentLine);
+              arr.forEach((line, index) => {
+                context.fillText(line, 129, y + (index * 20)); // 调整行高
+              })
+            })
+          }