前端根据参数生成二维码并下载

需求，根据给的内容生成二维码并且完成下载功能

1. 需要一个插件 qrcodejs2， 使用 

   npm install qrcodejs2 --save

    下载该依赖包。
2. 在dom结构中设置一个容器来承载它，并设置一个id.

3.  <div id="qrcodes" class="canvas" style="margin-bottom: 10px"></div>

   引入

import QRCode from 'qrcodejs2'

生成二维码

 makeQRCode(qrCodeContent){
      document.getElementById("qrcodes").innerHTML=''
      console.log("qrcodes", document.getElementById("qrcodes"))
      let qrcode = new QRCode(document.getElementById("qrcodes"), {
      text: qrCodeContent,   // 二维码内容
      width: 128,
      height: 128,
      colorDark : "#000000",  // 码的颜色
      colorLight : "#ffffff",  // 码的背景色
      correctLevel : QRCode.CorrectLevel.H  // 高度容错

  });

最开始的时候我是在created里面去调用，这个时候就忽略的异步的问题，导致一直生成失败

错误写法：

created(){
this.makeQRCode(this.qrCodeContent)
}

改正：因为这个二维码是在弹窗内生成，所以在打开弹窗的时候去调用，相当于给数据初始化

 // 二维码弹窗
    handleQRCode() {
      this.QRTitle=''
      this.QROpen=true
      console.log(this.qrCodeContent,'this.qrCodeContent')
      setTimeout(()=>{
        this.makeQRCode(this.qrCodeContent)
      }, 1000)
    },

下载二维码

 //   利用超链接下载
    downloadQRCode() {
      const qrCodeDiv= document.getElementById('qrcodes');  // 找到二维码div
      const url = qrCodeDiv.querySelector('canvas').toDataURL('image/png');          // 获取图片地址
      const a = document.createElement('a');          // 创建一个a节点插入的document
      const handle = new MouseEvent('click')           // 模拟鼠标click点击事件
      a.download = this.deptName                  // 设置a节点的download属性值
      a.href = url;                                 // 将图片的src赋值给a节点的href
      a.dispatchEvent(handle)            // 触发点击事件
    }

这里二维码的链接需要我自己拼

          this.qrCodeContent=window.location.protocol+'//'+window.location.host+'/app/download/zsh/stu/'+'?'+'deptId='+this.listDeptId+'&&'+'deptName='+this.deptName+'&&'+'grade='+gradeVal.toString()

window.location.protocol是协议，host是域名，后面的就是根据自己需要的形式去拼接了