vue-证书打印以及下载

2021-07-16

前言

证书打印这里分两种打印方式：一种是将证书模板和文字整体打印出来，根据证书模板以及文字的x、y坐标显示在相应的位置；另一种称之为套打，不打印模板，只打印需要的文字，根据文字的x、y坐标显示在相应的位置。

出现的问题

1.打印的时候图片会时而显示时而不显示

这里使用的打印插件是vue-print-nb，之前的使用方式要打印的区域定义的id，比如‘test’ 和打印按钮上定义v-print=”‘#test’” ，id一致就可以了。但在测试过程中发现，点击打印的时候图片会时而显示时而不显示。排查之后发现可能是异步的问题，使用this.$nextTick(() => {}）后问题得到解决。所以，后面改为引入打印插件的核心代码printarea(该文件在vue-print-nb -> src -> packages -> printarea.js)，之后的使用方法如下：

import Print from "@/utils/printarea";
this.$nextTick(() => {
  setTimeout(() => {
      new Print({
         ids: "#certificate", // * 局部打印必传入id
         endCallback() {
                // 调用打印之后的回调事件
         }
       });
	}, 500);
});

2.打印的时候图片跨域

在开发过程中，本人的电脑打印一切正常，但是其他小伙伴电脑出现图片跨域。在网上搜了很多方法，发现将图片转化为blob对象是可以解决问题的。

let myImage = new Image();
myImage.setAttribute("crossOrigin",'Anonymous')  
this.toDataURL(data.train_credit_template, function(dataUrl) {
    myImage.src = dataUrl;
});
myImage.crossOrigin = "Anonymous";

toDataURL(url, callback) {
   var xhr = new XMLHttpRequest();
   xhr.onload = function() {
     var reader = new FileReader();
     reader.onloadend = function() {
       callback(reader.result);
     };
     reader.readAsDataURL(xhr.response);
   };
   xhr.open("GET", url);
   xhr.responseType = "blob";
   xhr.send();
},

3.文字换行

上网搜索了一个方法

textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
        var drawTxt = ''; // 当前绘制的内容
        var drawLine = 1; // 第几行开始绘制
        var drawIndex = 0; // 当前绘制内容的索引
        ctx.textAlign = 'left'
        // 判断内容是否可以一行绘制完毕
        if(ctx.measureText(content).width <= lineMaxWidth) {
          ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
        } else {
          for (var i = 0; i < content.length; i++) {
            drawTxt += content[i];
            if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
              if (drawLine >= lineNum) {
                ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
                break;
              } else {
                ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
                drawIndex = i + 1;
                drawLine += 1;
                drawY += lineHeight;
                drawTxt = '';
              }
            } else {
              // 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
              if (i === content.length - 1) {
                ctx.fillText(content.substring(drawIndex), drawX, drawY);
              }
            }
          }
        }
      },

4.调节文字行间距

一定要加’!important‘，不然权限不够，会不起作用。

1
2
3

#chapterCanvas{
   letter-spacing: 3px !important;
}

5.通过样式调整打印的方向

@media print {
    @page{
      /*页面设置：a4 横幅*/
    	size: A4 portrait;
    }
}

6.如何只打印需要打印的部分

在套打过程中，不需要显示证书模板，所以只需要给证书模板dom添加以下定义的类，该类定义display:none，也就是说在打印的时候就不会显示了。

1	<img class="canvas-bg no-print" :src="item.comple_credit_template" :style="{'width': item.comple_credit_template_width+'px', 'height': item.comple_credit_template_height+'px'}"/>

@media print {
    .no-print {
      display: none;
    }
  }

7.如何下载

通过html2canvas插件将页面转化为图片。注意这里也有跨域问题，需要设置一个属性useCORS: true 。

let that = this
    var opts = {
      useCORS: true // 【重要】开启跨域配置
    };
    html2canvas(document.querySelector(id),opts).then(canvas => {
      that.downLoading.close()
      let url = canvas.toDataURL("image/jpeg");
      downloadFileByBase64(url,name)
    }).catch(error => {
    })

最后，通过downloadFileByBase64方法，将url处理一下，最后生成下载链接。

function dataURLtoBlob (dataurl, filename) {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}
function downloadFile (url, name) {
  var a = document.createElement("a");
  a.setAttribute("href", url);
  a.setAttribute("download", name);
  a.setAttribute("target", "_blank");
  let clickEvent = document.createEvent("MouseEvents");
  clickEvent.initEvent("click", true, true);
  a.dispatchEvent(clickEvent);
}

export default function downloadFileByBase64 (base64, name) {
  let myBlob = dataURLtoBlob(base64);
  let myUrl = URL.createObjectURL(myBlob);
  downloadFile(myUrl, name);
}

一、证书模板和文字整体打印出来

完整代码如下：

<template>
  <div class="certificate-container">
    <div class="printing">
      <div class="printing-btn" @click="adjustWidth">
        <i class="printing-icon iconfont icondayinji"></i>
        <p>打印</p>
      </div>
      <div class="printing-btn download" @click="download()">
        <i class="printing-icon el-icon-download" style="color:#fff"></i>
        <p>下载</p>
      </div>
    </div>
    <div class="certificate-box" id="certificate" style="height:100%;">
      <div class="certificate-list">
        <div :id="'certificate'+index" class="certificate-item" v-for="(item,index) in certificateList" :key="index">
          <div class="canvas-loading" v-if="loading" v-loading="loading"></div>
          <canvas :id="'chapterCanvas'+index" width="1006" height="710"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import html2canvas from 'html2canvas'
  import Print from "@/utils/printarea";
  import downloadFileByBase64 from '@/utils/exportBase64'
  export default {
    props: [ 'certificateList'],
    data() {
      return {
        loading: false,
        downLoading: false
      }
    },
    created() {
      this.$nextTick(()=> {
        this.loading = true
        this.certificateList.forEach((item,index) => {
          this.canvas(item,index)
        })
      })
    },
    methods: {
      adjustWidth() {
        this.$nextTick(() => {
          setTimeout(() => {
            new Print({
              ids: "#certificate", // * 局部打印必传入id
              endCallback() {
                // 调用打印之后的回调事件
              }
            });
          }, 500);
        });
      },
      textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
        var drawTxt = ''; // 当前绘制的内容
        var drawLine = 1; // 第几行开始绘制
        var drawIndex = 0; // 当前绘制内容的索引
        ctx.textAlign = 'left'
        // 判断内容是否可以一行绘制完毕
        if(ctx.measureText(content).width <= lineMaxWidth) {
          ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
        } else {
          for (var i = 0; i < content.length; i++) {
            drawTxt += content[i];
            if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
              if (drawLine >= lineNum) {
                ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
                break;
              } else {
                ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
                drawIndex = i + 1;
                drawLine += 1;
                drawY += lineHeight;
                drawTxt = '';
              }
            } else {
              // 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
              if (i === content.length - 1) {
                ctx.fillText(content.substring(drawIndex), drawX, drawY);
              }
            }
          }
        }
      },
      canvas(data,id){
        let canvas = document.getElementById("chapterCanvas"+id);
        let ctx = canvas.getContext("2d");
        // let canvas = document.getElementById("chapterCanvas");
        // let ctx = canvas.getContext("2d");
        let myImage = new Image();
        myImage.setAttribute("crossOrigin",'Anonymous')
        // myImage.src = data.train_credit_template;
        this.toDataURL(data.train_credit_template, function(dataUrl) {
          myImage.src = dataUrl;
        });
        myImage.crossOrigin = "Anonymous";
        let that = this
        myImage.onload = function(){
          if(myImage.complete){
            that.loading = false
            // 背景图片
            ctx.drawImage(myImage,0,0,1006,710);

            // 证书标题
            let title = data.course_name+'线上培训合格证书'
            ctx.font = "bold 38px Microsoft YaHei"
            ctx.textBaseline = 'middle'
            ctx.textAlign = 'center'
            ctx.fillStyle = "#103159"
            ctx.fillText(title, canvas.width / 2 - 5, 140)
            // 有学员照片
            if(data.train_credit_photo){
              // 内容
              ctx.font = "bold 23px Microsoft YaHei"
              ctx.textBaseline = 'middle'
              ctx.textAlign = 'center'
              ctx.fillStyle = "#333333"
              ctx.letterSpacing = '203px';
              let content = data.realname+' 于'+data.begin_time_Y+'年'+data.begin_time_m+'月'+ data.begin_time_d + '日至'+ data.end_time_Y+'年'+data.end_time_m+'月'+ data.end_time_d + '日参加'+data.course_name+'线上培训课程，在线学习时长达到规定课时（24课时），成绩合格，特发此证。'
              that.textPrewrap(ctx,content,300,240,65,550,50)

              // 照片
              let avatarImage = new Image();
              avatarImage.setAttribute("crossOrigin",'Anonymous')
              // avatarImage.src = data.credit_avatar
              that.toDataURL(data.credit_avatar, function(dataUrl) {
                avatarImage.src = dataUrl;
              });
              avatarImage.crossOrigin = "Anonymous";
              avatarImage.onload = function(){
                if(avatarImage.complete){
                  ctx.drawImage(avatarImage,120,230,142,200);
                }
              }
            }else{
              // 内容
              ctx.font = "bold 24px Microsoft YaHei"
              ctx.textBaseline = 'middle'
              ctx.textAlign = 'center'
              ctx.fillStyle = "#39322d"
              let content = data.realname+'于'+data.begin_time_Y+'年'+data.begin_time_m+'月'+ data.begin_time_d + '日至'+ data.end_time_Y+'年'+data.end_time_m+'月'+ data.end_time_d + '日参加'+ data.course_name +'线上培训课程，在线学习时长达到规定课时（24课时），成绩合格，特发此证。'
              that.textPrewrap(ctx,content,120,240,45,720,100)
            }


            // 身份证号
            let idcard = '身份证号：'+ data.idcard
            ctx.font = "20px Microsoft YaHei"
            ctx.textBaseline = 'middle'
            ctx.fillStyle = "#4A4B4B"
            ctx.fillText(idcard, 120, 510)

            // 证书编号
            let credit = '证书编号：'+ data.train_credit
            ctx.fillText(credit, 120, 580)


            // 发证单位
            let authority = '发证单位： （盖章）'
            ctx.fillText(authority, 660, 510)

            // 盖章日期
            let date = data.credit_time_Y+'年'+data.credit_time_m+'月'+ data.credit_time_d + '日'
            ctx.fillText(date, 660, 580)
          }
        }
      },
      toDataURL(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
          var reader = new FileReader();
          reader.onloadend = function() {
            callback(reader.result);
          };
          reader.readAsDataURL(xhr.response);
        };
        xhr.open("GET", url);
        xhr.responseType = "blob";
        xhr.send();
      },
      toImg (id,name) {
        let that = this
        var opts = {
          useCORS: true // 【重要】开启跨域配置
        };
        html2canvas(document.querySelector(id),opts).then(canvas => {
          that.downLoading.close()
          let url = canvas.toDataURL("image/jpeg");
          downloadFileByBase64(url,name)
        }).catch(error => {
        })
      },
      download(){
        this.downLoading = this.$loading({
          lock: true,
          text: '下载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$nextTick( ()=> {
          this.certificateList.forEach((item,index) => {
            this.toImg('#certificate'+index,'培训证书('+item.realname+')')
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .printing {
    position: fixed;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    z-index: 100;
    cursor: pointer;
    .printing-btn {
      width: 70px;
      height: 70px;
      background: #27A3FF;
      padding: 12px 0;
      border-radius: 4px 0px 0px 4px;
      text-align: center;
      .printing-icon{
        font-size: 24px;
        color: #fff;
      }
      p {
        font-size: 12px;
        color: #fff;
        padding-top: 6px;
        text-align: center;
      }
    }
    .download{
      margin-top: 3px;
    }
  }
  .certificate-box{
    padding: 30px;
    .certificate-list{
      height:100%;
      .certificate-item{
        text-align: center;
        #chapterCanvas{
          letter-spacing: 3px !important;
        }
        .canvas-loading{
          display: inline-block;
          width: 950px;
          height: 660px;
        }
      }
    }
  }
  /*以下样式可以控制打印的横纵方向，但项目中有其他的打印会影响全局所以在项目中注释了*/                 
  /*@media print {*/  
  /*  @page{*/
  /*    size:  auto;*/
  /*    margin: 10mm auto;*/
  /*  }*/
  /*}*/
</style>

二、证书模板不打印，只打印文字

<template>
  <div class="certificate-container">
    <div class="printing">
      <div class="printing-btn" @click="adjustWidth">
        <i class="printing-icon iconfont icondayinji"></i>
        <p>打印</p>
      </div>
    </div>
    <div class="certificate-box">
      <div class="certificate-list" id="certificate" style="height:100%;">
        <div class="certificate-item" v-for="(item,index) in certificateList" :key="index" :style="{'width': item.comple_credit_template_width+'px', 'height': item.comple_credit_template_height+'px'}">
          <img class="canvas-bg no-print" :src="item.comple_credit_template" :style="{'width': item.comple_credit_template_width+'px', 'height': item.comple_credit_template_height+'px'}"/>
          <div class="canvas-loading" v-if="loading" v-loading="loading" :style="{'width': item.comple_credit_template_width+'px', 'height': item.comple_credit_template_height+'px'}"></div>
          <canvas class="canvas-item" :id="'chapterCanvas'+index" :width="item.comple_credit_template_width" :height="item.comple_credit_template_height"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Print from '@/utils/printarea'
  export default {
    props: [ 'certificateList'],
    data() {
      return {
        loading: false
      }
    },
    created() {
      this.$nextTick(()=> {
        this.loading = true
        this.certificateList.forEach((item,index) => {
          this.canvas(item,index)
        })
      })
      let that = this
      setTimeout(() => {
        that.loading = false
      }, 1500);
    },
    methods: {
      adjustWidth() {
        this.$nextTick(() => {
          var that = this;
          setTimeout(() => {
            new Print({
              ids: "#certificate", // * 局部打印必传入id
              ignoreClass: 'noprint',
              endCallback() {
                // 调用打印之后的回调事件
              }
            });
          }, 500);
        });
      },
      canvas(data,id){
        let canvas = document.getElementById("chapterCanvas"+id);
        let ctx = canvas.getContext("2d");
        if(data.comple_templates.length !== 0){
          data.comple_templates.forEach(item =>{
            let fontSize = ''
            if(data.comple_credit_template_height < 500){
              fontSize = '12'
            }else{
              fontSize = data.comple_credit_template_height*0.024
            }
            ctx.font = fontSize + "px Microsoft YaHei"
            ctx.textBaseline = 'middle'
            ctx.fillStyle = "#000"
            if (!item.text) {
              ctx.fillText('--', item.x_coordinate, item.y_coordinate)
            } else {
              ctx.fillText(item.text, item.x_coordinate, item.y_coordinate)
            }
          })
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .printing {
    position: fixed;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    z-index: 100;
    cursor: pointer;
    .printing-btn {
      width: 70px;
      height: 70px;
      background: #27A3FF;
      padding: 12px 0;
      border-radius: 4px 0px 0px 4px;
      text-align: center;
      .printing-icon{
        font-size: 24px;
        color: #fff;
      }
      p {
        font-size: 12px;
        color: #fff;
        padding-top: 6px;
        text-align: center;
      }
    }
  }
  .certificate-box{
    .certificate-list{
      height:100%;
      .certificate-item{
        position: relative;
        text-align: center;
        margin: 0 auto;
        .canvas-loading{
          display: inline-block;
        }
        .canvas-bg{
          position: absolute;
          left: 0;
          top: 0;
        }
        .canvas-item{
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto;
          top: 0;
          z-index: 10;
        }
      }
    }
  }

  @media print {
    .no-print {
      display: none;
    }
  }
</style>