style:证书预览

 <!--
  * @Description: 
  * @Autor: renchao
- * @LastEditTime: 2023-06-20 15:57:59
+ * @LastEditTime: 2023-06-20 16:09:31
 -->
 <template>
-  <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px">
+  <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
     <!-- 表单部分 -->
     <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1">
       <el-tab-pane :label="item.qlr + '(' + item.bdcqzh + ')'" :name="item.bdcqzlx"
         v-for="(item, index) in headTabBdcqz" :key="index"></el-tab-pane>
     </el-tabs>
     <div class="no-data" v-if="headTabBdcqz.length == 0">暂无数据</div>
-    <canvas ref="zs" width="860" v-if="activeName==1" height="720"></canvas>
+    <canvas ref="zs" width="1000" v-if="activeName==1" height="700"></canvas>
     <canvas ref="zm" width="1180" v-else height="780"></canvas>
   </div>
 </template>
@@ -107,7 +107,7 @@
         const image = new Image();
         image.onload = () => {
           context.drawImage(image, 0, 0);
-          context.font = '15px 楷体';
+          context.font = '18px 楷体';
           context.fillStyle = '#000000';
           context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56);
           context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56);
@@ -122,7 +122,28 @@
           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);
+          // qlqtzk
+          const maxWidth = 280; // 最大宽度限制
+          let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
+          lines.forEach((line, index) => {
+            const y = 469 + (index * 37); // 每行文本的垂直位置
+            let currentLine = '';
+            let arr = [];
+            for (let word of line) {
+              const testLine = currentLine + word;
+              const lineWidth = context.measureText(testLine).width;
+              if (lineWidth <= maxWidth) {
+                currentLine = testLine;
+              } else {
+                arr.push(currentLine);
+                currentLine = word;
+              }
+            }
+            arr.push(currentLine);
+            arr.forEach((line, index) => {
+              context.fillText(line, 138, y + (index * 20)); // 调整行高
+            })
+          })
           context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 580, 100);
         }
         image.src = this.imgSrc