vue生成证书模板并支持图片和PDF格式下载的小demo

文章目录

【前言】
【正文】
预览效果
【扩展】

【前言】

证书的生成需要使用html2canvas 和jspdf 两个插件
查看使用方法：vue生成证书模板

【正文】

前提需要安装插件和配置，查看上一篇文章即可。

index.vue

/** @Description: 奖状页面* @Version: 3.0* @Author: 张艳伟* @Date: 2021年10月5日19:26:59* @LastEditors: * @LastEditTime: */<template><div><h3></h3><el-button type="primary" class="button" @click="preview">预览证书</el-button><el-dialogtitle="证书预览和下载":visible.sync="dialogVisible"width="60%":before-close="handleClose"><div id="pdfDom"><div class="proBox"><p class="tit"><center>荣誉证书</center></p><p class="con"><span>恭喜</span><span class="con-name">{{ userName }}</span>同学：<br /></p><p class="con-text"><span>在《“键盘侠”成长记》活动中荣获</span></p><p class="con-height"><span><center>{{ level }}</center></span></p><p class="con-text">荣誉称号，特发此状，以资鼓励。</p><div class="con-unit"><p class="time">{{ this.start }}</p></div><div class="chapter" v-show="isShow"><canvas id="chapterCanvas" width="150" height="150"></canvas></div></div></div><span slot="footer" class="dialog-footer"><el-switchinactive-color="#67c23a"v-model="downType"active-text="图片下载"inactive-text="pdf下载"style="margin-right: 20px"></el-switch><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="getPdf('#pdfDom')">下载</el-button></span></el-dialog></div>
</template><script>
export default {data() {return {//从本地缓存中获得当前登录账号和等级userName: localStorage.getItem("username"),level:localStorage.getItem("level"),//获取当前日期start: "",dialogVisible: false,pageData: null, //接收html格式代码htmlTitle: "荣誉证书",isShow: true,isCanvas: false,downType: true, // false为 pdf , true为图片};},methods: {handleClose() {this.dialogVisible = false;},preview() {var vm = this;//获取当前日期var data = new Date(new Date().setHours(0, 0, 0, 0));vm.start =data.getFullYear() + "-" + (data.getMonth() + 1) + "-" + data.getDate();console.log(vm.start);this.dialogVisible = true;this.$nextTick(() => {if (!this.isCanvas) {// 只绘画一次this.isCanvas = true;this.getChapter();}});},},
};
</script><style scoped >
::v-deep .el-dialog__body {padding: 0px;display: flex;justify-content: center;
}
#pdfDom {/* 要想pdf周边留白，要在这里设置 */padding: 20px;width: 750px;
}
.proBox {/* 奖状的模板 */background: url("../assets/img/zs.jpg") no-repeat;background-size: cover;width: 750px;height: 525px;padding: 90px 94px;box-sizing: border-box;margin: 0 auto;position: relative;color: #000;font-family: SimSun;
}
.tit {color: #cf0c0c;font-size: 36px;font-weight: 700;position: relative;top: -6px;left: 8px;letter-spacing: 20px;font-family: STHeiti;margin: 20px 0;
}
.proid {text-align: right;margin: 0;font-weight: 500;
}.con {font-size: 20px;font-weight: 700;text-align: left;margin: 10px 0;line-height: 32px;text-indent: 2em;
}
.con-text {font-size: 20px;font-weight: 700;text-align: left;margin: 10px 0;line-height: 32px;text-indent: 5em;
}
.con-name {font-family: 华文行楷, STXingkai;border-bottom: 2px solid #000;
}
.con-height {font-family: 华文行楷, STXingkai;font-weight: 700;font-size: 2em
}
.con-unit {font-size: 18px;font-weight: 700;position: absolute;right: 130px;bottom: 100px;text-align: center;letter-spacing: 3px;
}
.con-unit p {margin: 5px 0;
}
.con-footer {font-size: 18px;font-weight: 700;position: absolute;bottom: 45px;left: 0;right: 0;text-align: center;
}
.chapter {border-radius: 50%;position: absolute;bottom: 75px;right: 134px;
}
.button{margin: 50px 50px;position: absolute;font-family: 华文行楷, STXingkai;font-weight: 700;font-size: 2em
}
</style>

预览效果

【扩展】

如果有需要生成奖章的，可以手动画一个奖章

 // 生成印章getChapter() {var canvas = document.getElementById("chapterCanvas");var context = canvas.getContext("2d");var text = "xxx专用章";var companyName = "单位名称;//  context.translate(0, 0);// context.clearRect(0, 0, 200, 200);//清除整个画布// 绘制印章边框var width = canvas.width / 2;var height = canvas.height / 2;context.lineWidth = 3;context.strokeStyle = "#cf0c0c";context.beginPath();context.arc(width, height, 60, 0, Math.PI * 2); //宽、高、半径context.stroke();//画五角星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 宋体";var count = companyName.length; // 字数var angle = (5 * Math.PI) / (3 * (count - 1)); // 字间角度var chars = companyName.split("");var c;for (var 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(); //创建路径var x = Math.sin(0);var y = Math.cos(0);var dig = (Math.PI / 5) * 4;for (var i = 0; i < 5; i++) {//画五角星的五条边var x = Math.sin(i * dig);var y = Math.cos(i * dig);context.lineTo(x * radius, y * radius);}context.closePath();context.stroke();context.fill();context.restore();}}}

选择奖章是否下载：

 <el-checkbox v-model="isShow" style="margin-right: 20px;">添加盖章</elcheckbox>

感谢阅读~

vue生成证书模板并支持图片和PDF格式下载的小demo相关推荐

vue 生成证书模板并支持图片下载和导出PDF的demo
demo 使用的是html2canvas 和jspdf 插件, 不明白的先去看这个插件使用下面是我的一个例子,大家可以参考: 注意: 请先看上面文章,安装插件和配置,这里不重复说了哦 index. ...
生成证书模板---vue实现HTML转PDF
文章目录 1.下载插件模块 2.定义功能实现方法 3.全局引入实现方法 4.在相关要导出的页面中,点击时调用绑定在vue原型上的getPDF方法自动生成证书并且导出PDF格式 1.下载插件模块 np ...
怎么把图片转PDF格式？转换方法分享
怎么将图片转换成PDF格式呢?图片文件是我们经常拿来使用的一种文件格式,因为它查看起来非常方便,所以有的小伙伴胡使用大量的图片素材来辅助办公.但是当我们在使用的过程中,有的小伙伴觉得翻找图片会很麻烦, ...
Python模块介绍使用：img2pdf 几行代码将图片转为PDF格式文件
hello,大家好,今天我来推荐一个模块--img2pdf,这个模块可以把图片转换为pdf,开始学习吧! 1. pip安装使用命令: pip install img2pdf 安装完毕后,打开一个Py ...
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件效果如图直接看代码吧 template部分 <div class="file-upload&q ...
vue生成一个姓名的头像图片Base64格式
关注微信公众号:每日玩机获取ios.Android.tv.mac黑科技软件本方法是写成了全局方法,用this.$userHead(name)调用,如需单独在一个页面中使用,也可以在页面中单独写成一 ...
jpg图片转为pdf？图片生成pdf的步骤？图片转pdf格式怎么转简单的教程方法？
有时候我们需要把图片转成pdf.可能还有些小伙伴不知道怎么去完成这项转换的,图片转pdf其实很简单,下面给大家分享一个超级简单的pdf转图片方法: 搜索一下:~~~~~~轻云pdf编辑压缩官网打开网 ...
vue项目实现前端预览word和pdf格式文件
最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来.word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇 ...
MATLAB图片导出PDF格式，并且控制图片白色边框大小——非代码方法
Mtalab生成的图片,可以另存为pdf格式,但是实际情况却是下图所示,pdf纸张大小为A4,实际图却很小,显然不行. 这是由于纸张大小(PaperSize)和图片大小(PaperPosition)不 ...
前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...

vue生成证书模板并支持图片和PDF格式下载的小demo

文章目录

【前言】

【正文】

预览效果

【扩展】

vue生成证书模板并支持图片和PDF格式下载的小demo相关推荐

最新文章

热门文章

vue生成证书模板 并支持图片和PDF格式下载的小demo

文章目录

【前言】

【正文】

预览效果

【扩展】

vue生成证书模板 并支持图片和PDF格式下载的小demo相关推荐

最新文章

热门文章

vue生成证书模板并支持图片和PDF格式下载的小demo

vue生成证书模板并支持图片和PDF格式下载的小demo相关推荐