vue-qr生成二维码并下载到本地【前端】

<div id="qrcode">
          <vue-qr ref="qr" :logoSrc="imageUrl" :text="qrText" :size="400"></vue-qr>
        </div>
        <div style="text-align:right;">
          <a-button type="primary" @click="saveCode(qrId)">保存到本地</a-button>
        </div>

data(){
    return(){
      imageUrl: require('@/assets/tianyuan.png'),
      qrText: '',
      qrId:'',
    }
}

//保存二维码
    saveCode(data) {
      const fileName = data + 'png'
      let img = document.getElementById('qrcode').getElementsByTagName('img')[0].src

      let aLink = document.createElement('a')
      let blob = this.base64ToBlob(img)
      let evt = document.createEvent('HTMLEvents')
      evt.initEvent('click', true, true) // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName
      aLink.href = URL.createObjectURL(blob)
      // aLink.dispatchEvent(evt);
      aLink.click()
    },
    //base64转blob
    base64ToBlob(code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length
      let uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },

 

 

 

https://my.oschina.net/songms/blog/5124625