Vue下载base64格式的二维码图片

   <div class="line">
     <img :src="img" class="w200" ref="canvas" />
     <a-icon type="download" class="icon" @click="downloadQrCode" title="下载二维码"></a-icon>
   </div>

  data() {
    return {
      img: 'data:image/png;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    }
  },

 //下载二维码
    // loadCode() {
    // const ref = this.$refs.canvas // 截图区域
    // html2canvas(ref, {
    //   backgroundColor: '#fff',
    //   useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
    // }).then(canvas => {
    //   const dataURL = canvas.toDataURL('image/png')
    //   console.log(dataURL)

    //   // 下载图片
    //   const creatDom = document.createElement('a')
    //   document.body.appendChild(creatDom)
    //   creatDom.href = dataURL
    //   creatDom.download = '二维码' + formatDate(new Date().getTime(), 'MM_dd_hh_mm_ss')
    //   creatDom.click()
    // })
    // },
    base64ToBlob(base64Str, contentType, sliceSize) {
      contentType = contentType || ''
      sliceSize = sliceSize || 512

      const byteCharacters = atob(base64Str.split(',')[1])
      const byteArrays = []

      for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize)

        const byteNumbers = new Array(slice.length)
        for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i)
        }

        const byteArray = new Uint8Array(byteNumbers)
        byteArrays.push(byteArray)
      }

      const blob = new Blob(byteArrays, { type: contentType })
      return blob
    },
    downloadQrCode(fileName) {
      const blob = this.base64ToBlob(this.img, 'image/png')
      const url = URL.createObjectURL(blob)

      const link = document.createElement('a')
      link.href = url
      link.download = '二维码' + formatDate(new Date().getTime(), 'MM_dd_hh_mm_ss')
      document.body.appendChild(link)
      link.click()

      // 清理
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
    },