style:证书打印
Showing
1 changed file
with
28 additions
and
3 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Description: | 2 | * @Description: |
| 3 | * @Autor: renchao | 3 | * @Autor: renchao |
| 4 | * @LastEditTime: 2023-08-10 15:20:52 | 4 | * @LastEditTime: 2023-08-23 15:36:24 |
| 5 | --> | 5 | --> |
| 6 | <template> | 6 | <template> |
| 7 | <div> | 7 | <div> |
| ... | @@ -117,7 +117,7 @@ | ... | @@ -117,7 +117,7 @@ |
| 117 | const image = new Image(); | 117 | const image = new Image(); |
| 118 | image.onload = () => { | 118 | image.onload = () => { |
| 119 | context.drawImage(image, 0, 0); | 119 | context.drawImage(image, 0, 0); |
| 120 | context.font = '18px 楷体'; | 120 | context.font = '16px 楷体'; |
| 121 | context.fillStyle = '#000000'; | 121 | context.fillStyle = '#000000'; |
| 122 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56); | 122 | context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56); |
| 123 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56); | 123 | context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56); |
| ... | @@ -131,7 +131,32 @@ | ... | @@ -131,7 +131,32 @@ |
| 131 | context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 138, 303); | 131 | context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 138, 303); |
| 132 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346); | 132 | context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346); |
| 133 | context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386); | 133 | context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386); |
| 134 | // 使用期限 | ||
| 135 | if (this.bdcqz.syqx && this.bdcqz.syqx.length > 28) { | ||
| 136 | let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(' ') : []; | ||
| 137 | lines3.forEach((line, index) => { | ||
| 138 | const y = 427 + (index * 27); // 每行文本的垂直位置 | ||
| 139 | let currentLine = ''; | ||
| 140 | let arr = []; | ||
| 141 | for (let word of line) { | ||
| 142 | const testLine = currentLine + word; | ||
| 143 | const lineWidth = context.measureText(testLine).width; | ||
| 144 | if (lineWidth <= 315) { | ||
| 145 | currentLine = testLine; | ||
| 146 | } else { | ||
| 147 | arr.push(currentLine); | ||
| 148 | currentLine = word; | ||
| 149 | } | ||
| 150 | } | ||
| 151 | arr.push(currentLine); | ||
| 152 | arr.forEach((line, index) => { | ||
| 153 | context.fillText(line, 138, y + (index * 20)); // 调整行高 | ||
| 154 | }) | ||
| 155 | }) | ||
| 156 | } else { | ||
| 134 | context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429); | 157 | context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429); |
| 158 | } | ||
| 159 | |||
| 135 | // qlqtzk | 160 | // qlqtzk |
| 136 | const maxWidth = 280; // 最大宽度限制 | 161 | const maxWidth = 280; // 最大宽度限制 |
| 137 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : []; | 162 | let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : []; |
| ... | @@ -155,7 +180,7 @@ | ... | @@ -155,7 +180,7 @@ |
| 155 | }) | 180 | }) |
| 156 | }) | 181 | }) |
| 157 | 182 | ||
| 158 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split(' ') : []; | 183 | let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split('\n') : []; |
| 159 | lines1.forEach((line, index) => { | 184 | lines1.forEach((line, index) => { |
| 160 | const y = 100 + (index * 37); // 每行文本的垂直位置 | 185 | const y = 100 + (index * 37); // 每行文本的垂直位置 |
| 161 | let currentLine = ''; | 186 | let currentLine = ''; | ... | ... |
-
Please register or sign in to post a comment