当前位置：首页 > news >正文

证书模板vue写法

news 2026/5/11 20:07:27

1：引用页面

import zsDialog from "./module/CertificateInfo.vue";

components: {
zsDialog
},

dk(){
this.$refs.zsDialog.visible = true;
},
gb(){
this.$refs.zsDialog.visible = false;
},

2:证书组件

<template>
<el-dialog
title="证书下载"
:visible.sync="visible"
width="80%"
height="80%"
append-to-body
:before-close="handleClose"
:close-on-click-modal="false"
>
<div>
<div id="pdfDom">
<div class="proBox">
<p><span>证书编号：</span> <span>{{rowData.bh}}</span></p>
<p style="display: flex;align-items: center;margin: 5px 0;">
<span>{{rowData.dc}}</span>
<img :src="rowData.logo" style="width: 180px;height: 50px;margin: 0 20px;" >
</p>
<p class="tit">【{{rowData.name}}】授权证书</p>
<p><span>{{rowData.userName}} 同志（员工号/身份证号）：{{rowData.userCode+"/"+rowData.idCard}}</span></p>
<p style="margin: 25px 0;">
已完成 {{rowData.dc}} 佛惠山的登顶。
决定给予该同志此授权。
</p>

<p style="margin: 25px 0;">
运动类型：

</el-dialog>
</template>

//画五角星
create5star(context, width, height, 15, "#cf0c0c", 0);

// 绘制印章名称
context.font = "20px 宋体";
context.textBaseline = "middle"; //设置文本的垂直对齐方式
context.textAlign = "center"; //设置文本的水平对对齐方式
context.lineWidth = 1;
context.strokeStyle = "#cf0c0c";
// context.strokeText(text, width, height + 30); // 名称 xx专用章

// 绘制印章单位
context.translate(width, height); // 平移到此位置,
context.font = "20px 宋体";
let count = companyName.length; // 字数
let angle = (5 * Math.PI) / (3 * (count - 1)); // 字间角度
let chars = companyName.split("");
let c;
for (let i = 0; i < count; i++) {
c = chars[i]; // 需要绘制的字符
if (i == 0) {
context.rotate((4 * Math.PI) / 6);// 文字起始位置
} else {
context.rotate(angle);
}

context.save();
context.translate(45, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
context.strokeText(c, 0, 0); // 此点为字的中心点
context.restore();
}

//绘制五角星
function create5star(context, sx, sy, radius, color, rotato) {
context.save();
context.fillStyle = color;
context.translate(sx, sy); //移动坐标原点
context.rotate(Math.PI + rotato); //旋转
context.beginPath(); //创建路径
let x = Math.sin(0);
let y = Math.cos(0);
let dig = (Math.PI / 5) * 4;
for (let i = 0; i < 5; i++) {
//画五角星的五条边
let x = Math.sin(i * dig);
let y = Math.cos(i * dig);
context.lineTo(x * radius, y * radius);
}
context.closePath();
context.stroke();
context.fill();
context.restore();
}
},
handleDownload() {
html2canvas(document.getElementById('pdfDom'), {
scale: 2,
useCORS: true,
logging: false
}).then(function(canvas) {
// 创建下载链接
const link = document.createElement('a')
link.download = '证书.png'
link.href = canvas.toDataURL('image/png')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
}
}
}
</script>

#chapterCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
border-radius: 50%;
}

.signature-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 0 20px 20px;
box-sizing: border-box;
pointer-events: none; /* 允许点击穿透到Canvas */
color: #333;
}

.signature-text p {
margin: 5px 0;
white-space: nowrap;
}
</style>