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-dialog
      title="证书预览和下载"
      :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-switch
          inactive-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>

感谢阅读~