style:证书预览
Showing
2 changed files
with
100 additions
and
14 deletions
1 | <!-- | 1 | <!-- |
2 | * @Description: | 2 | * @Description: |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2024-01-17 09:26:42 | 4 | * @LastEditTime: 2024-01-17 10:13:32 |
5 | --> | 5 | --> |
6 | <template> | 6 | <template> |
7 | <div> | 7 | <div> |
... | @@ -510,11 +510,97 @@ | ... | @@ -510,11 +510,97 @@ |
510 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 750, 125); | 510 | context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 750, 125); |
511 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 960, 123); | 511 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 960, 123); |
512 | context.fillText(this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : '', 775, 180); | 512 | context.fillText(this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : '', 775, 180); |
513 | context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228); | 513 | // context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228); |
514 | // 义务人 | 514 | // 义务人 |
515 | context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275); | 515 | // context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275); |
516 | |||
517 | // 权利人 | ||
518 | let qlrlines = this.bdcqz.qlr ? this.bdcqz.qlr.split(' ') : []; | ||
519 | if (getByteLen(this.bdcqz.qlr) > 37) { | ||
520 | qlrlines.forEach((line, index) => { | ||
521 | let currentLine = ''; | ||
522 | let arr = []; | ||
523 | for (let word of line) { | ||
524 | const testLine = currentLine + word; | ||
525 | const lineWidth = context.measureText(testLine).width; | ||
526 | if (lineWidth <= 295) { | ||
527 | currentLine = testLine; | ||
528 | } else { | ||
529 | arr.push(currentLine); | ||
530 | currentLine = word; | ||
531 | } | ||
532 | } | ||
533 | arr.push(currentLine); | ||
534 | arr.forEach((line, index) => { | ||
535 | context.fillText(line, 775, 218 + (index * 20)); // 调整行高 | ||
536 | }) | ||
537 | }) | ||
538 | } else { | ||
539 | qlrlines.forEach((line, index) => { | ||
540 | let currentLine = ''; | ||
541 | let arr = []; | ||
542 | for (let word of line) { | ||
543 | const testLine = currentLine + word; | ||
544 | const lineWidth = context.measureText(testLine).width; | ||
545 | if (lineWidth <= 295) { | ||
546 | currentLine = testLine; | ||
547 | } else { | ||
548 | arr.push(currentLine); | ||
549 | currentLine = word; | ||
550 | } | ||
551 | } | ||
552 | arr.push(currentLine); | ||
553 | arr.forEach((line, index) => { | ||
554 | context.fillText(line, 775, 228 + (index * 20)); // 调整行高 | ||
555 | }) | ||
556 | }) | ||
557 | } | ||
558 | // 义务人 | ||
559 | let ywrlines = this.bdcqz.ywr ? this.bdcqz.ywr.split(' ') : []; | ||
560 | if (getByteLen(this.bdcqz.ywr) > 37) { | ||
561 | ywrlines.forEach((line, index) => { | ||
562 | let currentLine = ''; | ||
563 | let arr = []; | ||
564 | for (let word of line) { | ||
565 | const testLine = currentLine + word; | ||
566 | const lineWidth = context.measureText(testLine).width; | ||
567 | if (lineWidth <= 295) { | ||
568 | currentLine = testLine; | ||
569 | } else { | ||
570 | arr.push(currentLine); | ||
571 | currentLine = word; | ||
572 | } | ||
573 | } | ||
574 | arr.push(currentLine); | ||
575 | arr.forEach((line, index) => { | ||
576 | context.fillText(line, 775, 265 + (index * 20)); // 调整行高 | ||
577 | }) | ||
578 | }) | ||
579 | } else { | ||
580 | ywrlines.forEach((line, index) => { | ||
581 | let currentLine = ''; | ||
582 | let arr = []; | ||
583 | for (let word of line) { | ||
584 | const testLine = currentLine + word; | ||
585 | const lineWidth = context.measureText(testLine).width; | ||
586 | if (lineWidth <= 295) { | ||
587 | currentLine = testLine; | ||
588 | } else { | ||
589 | arr.push(currentLine); | ||
590 | currentLine = word; | ||
591 | } | ||
592 | } | ||
593 | arr.push(currentLine); | ||
594 | arr.forEach((line, index) => { | ||
595 | context.fillText(line, 775, 275 + (index * 20)); // 调整行高 | ||
596 | }) | ||
597 | }) | ||
598 | } | ||
599 | |||
600 | |||
601 | |||
516 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : []; | 602 | let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : []; |
517 | if (getByteLen(this.bdcqz.zl) >= 39) { | 603 | if (getByteLen(this.bdcqz.zl) > 37) { |
518 | lines2.forEach((line, index) => { | 604 | lines2.forEach((line, index) => { |
519 | const y = 315 + (index * 20); // 每行文本的垂直位置 | 605 | const y = 315 + (index * 20); // 每行文本的垂直位置 |
520 | let currentLine = ''; | 606 | let currentLine = ''; |
... | @@ -581,18 +667,18 @@ | ... | @@ -581,18 +667,18 @@ |
581 | arr.push(currentLine); | 667 | arr.push(currentLine); |
582 | if (i > 0) { | 668 | if (i > 0) { |
583 | arr.forEach((line, index) => { | 669 | arr.forEach((line, index) => { |
584 | context.fillText(line, 770, 438 + (23 * (i - 1)) + 5 * num + (index * 16)); // 调整行高 | 670 | context.fillText(line, 770, 438 + (24 * (i - 1)) + 5 * num + (index * 17)); // 调整行高 |
585 | }) | 671 | }) |
586 | } else { | 672 | } else { |
587 | arr.forEach((line, index) => { | 673 | arr.forEach((line, index) => { |
588 | context.fillText(line, 770, 438 + (23 * (i - 1)) + (index * 16)); // 调整行高 | 674 | context.fillText(line, 770, 438 + (24 * (i - 1)) + (index * 17)); // 调整行高 |
589 | }) | 675 | }) |
590 | } | 676 | } |
591 | } else { | 677 | } else { |
592 | if (i > 0) { | 678 | if (i > 0) { |
593 | context.fillText(lines[i] ? lines[i] : '', 770, 447 + 6 * num + (23 * (i - 1))); | 679 | context.fillText(lines[i] ? lines[i] : '', 770, 447 + 6 * num + (25 * (i - 1))); |
594 | } else { | 680 | } else { |
595 | context.fillText(lines[i] ? lines[i] : '', 770, 447 + (23 * (i - 1))); | 681 | context.fillText(lines[i] ? lines[i] : '', 770, 447 + (25 * (i - 1))); |
596 | } | 682 | } |
597 | } | 683 | } |
598 | } | 684 | } | ... | ... |
1 | <!-- | 1 | <!-- |
2 | * @Description: | 2 | * @Description: |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2024-01-17 09:35:40 | 4 | * @LastEditTime: 2024-01-17 10:17:29 |
5 | --> | 5 | --> |
6 | <template> | 6 | <template> |
7 | <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="text-align: center;"> | 7 | <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="text-align: center;"> |
... | @@ -438,7 +438,7 @@ | ... | @@ -438,7 +438,7 @@ |
438 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 960, 123); | 438 | context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 960, 123); |
439 | context.fillText(this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : '', 775, 180); | 439 | context.fillText(this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : '', 775, 180); |
440 | // context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228); | 440 | // context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228); |
441 | 441 | // 权利人 | |
442 | let qlrlines = this.bdcqz.qlr ? this.bdcqz.qlr.split(' ') : []; | 442 | let qlrlines = this.bdcqz.qlr ? this.bdcqz.qlr.split(' ') : []; |
443 | if (getByteLen(this.bdcqz.qlr) > 37) { | 443 | if (getByteLen(this.bdcqz.qlr) > 37) { |
444 | qlrlines.forEach((line, index) => { | 444 | qlrlines.forEach((line, index) => { |
... | @@ -594,18 +594,18 @@ | ... | @@ -594,18 +594,18 @@ |
594 | arr.push(currentLine); | 594 | arr.push(currentLine); |
595 | if (i > 0) { | 595 | if (i > 0) { |
596 | arr.forEach((line, index) => { | 596 | arr.forEach((line, index) => { |
597 | context.fillText(line, 770, 428 + (25 * (i - 1)) + 5 * num + (index * 15)); // 调整行高 | 597 | context.fillText(line, 770, 438 + (24 * (i - 1)) + 5 * num + (index * 17)); // 调整行高 |
598 | }) | 598 | }) |
599 | } else { | 599 | } else { |
600 | arr.forEach((line, index) => { | 600 | arr.forEach((line, index) => { |
601 | context.fillText(line, 770, 435 + (25 * (i - 1)) + (index * 14)); // 调整行高 | 601 | context.fillText(line, 770, 438 + (24 * (i - 1)) + (index * 17)); // 调整行高 |
602 | }) | 602 | }) |
603 | } | 603 | } |
604 | } else { | 604 | } else { |
605 | if (i > 0) { | 605 | if (i > 0) { |
606 | context.fillText(lines[i] ? lines[i] : '', 770, 440 + 5 * num + (24 * (i - 1))); | 606 | context.fillText(lines[i] ? lines[i] : '', 770, 447 + 6 * num + (25 * (i - 1))); |
607 | } else { | 607 | } else { |
608 | context.fillText(lines[i] ? lines[i] : '', 770, 440 + (24 * (i - 1))); | 608 | context.fillText(lines[i] ? lines[i] : '', 770, 447 + (25 * (i - 1))); |
609 | } | 609 | } |
610 | } | 610 | } |
611 | } | 611 | } | ... | ... |
-
Please register or sign in to post a comment