证书生成清晰度

1.生成图片前需要把html的宽度放大一些，这样html2canvas才会清晰，生成完成后再把布局缩小回去，因为业务需要展示证书样式（此处使用布局展示）

2.图片转pdf时，设置画布大小一级图片大小

// html转为图片（base64格式），且上传到七牛
async sureMade() {
  const targetDom = document.querySelector('#certificate_box'); // html布
  targetDom.style.transform = 'scale(3, 3)';
  this.loading = true;
  html2canvas(targetDom, {
    width: targetDom.scrollWidth * 3,
    height: targetDom.scrollHeight * 3,
    useCORS: true,
  }).then((canvas) => {
    targetDom.style.transform = 'scale(1,1)'
    const pageData = canvas.toDataURL('image/jpeg', 1.0)
    //注意这个url,可以指定key(文件名), mimeType(文件类型)
    var url = "http://up.qiniu.com/putb64/-1";
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Authorization", `UpToken ${你的token}`);
    xhr.send(pageData.substring(23));
    xhr.onloadend = (e) => {
      const {status, responseText} = e.currentTarget
      if (status == 200) {
        var data = JSON.parse(responseText)
        const result = `${域名}/${上传后七牛返回的key}`
        this.madeCertificate(result) // 掉后端的保存接口
      } else {
        this.loading = false
        this.$message.error('生成失败')
      }
    }
  })
},
// 图片转pdf
download(){
  const loading = this.$loading({
    lock: true,
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  }); // 加loading，防止多次点击
  setTimeout(()=>{
    const img = this.$refs.refImg // 获取图片
    // pdf的参数：pdf方向(横向，竖向), pdf大小单位，  pdf的宽，高 
    const PDF = new window.jspdf.default('l', 'px', [img.width + 100,img.height + 100]);
    // 生成时参数：图片url(eg:https://xxx.com/Fskhkaszh),图片格式，间距（相当于padding 上下，左右），生成时pdf中图片宽度，生成时pdf中图片图片高度
    PDF.addImage(img, 'JPEG', 50, 50, img.width, img.height);
    // 启用promise,完成后关闭loading
    PDF.save(`${文档名称}.pdf`, {returnPromise: true}).then(() => {
      loading.close()
    });
  },100)
},