vue中 生成二维码 并自动批量下载

项目中经常又这样的需求，要求将字符串生成二维码，并下载下来

一般分为 生成一个二维码展示并下载，对于这种你只需调用 qrcodejs2生成二维码就可以了 下载也是按钮触发 

今天我们要说的是 批量下载，具体做法是

首先下载资源

npm install  qrcodejs2 --save

在对于的文件中引入，在template中添加如下的html代码

<div id="qrcode" style="display:none"></div>

然后就是获得一个 数组字符串，就是需要生成二维码的字符串 弄成一个数组

    let newArr = getNewArra()
    for (let i = 0; i < newArr.length; i++) {
        (function (code) {
            new QRCode('qrcode', {
              width: 200,
              height: 200, // 高度
              text: code, // 二维码内容
              correctLevel: QRCode.CorrectLevel.H
              })
             downloadQrCode()
        })(newArr[i])
    }

 function downloadQrCode () {
        let myselfCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
        let img = document.getElementById('qrcode').getElementsByTagName('img')
        let ah = document.createElement('a')
        let imgURL = myselfCanvas[0].toDataURL('image/jpg')
        let u = navigator.userAgent
        if (u.indexOf('Trident') !== -1 && u.indexOf('Windows') !== -1) {
          let bstr = atob(imgURL.split(',')[1])
          let n = bstr.length
          let u8arr = new Uint8Array(n)
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
          }
          let blob = new Blob([u8arr])
          window.navigator.msSaveOrOpenBlob(blob, '二维码' + '.' + 'png')
        } else if (u.indexOf('Firefox') > -1) {
          let blob = base64ToBlob(imgURL)
          let evt = document.createEvent('HTMLEvents')
          evt.initEvent('click', true, true)
          ah.download = ' '
          ah.href = URL.createObjectURL(blob)
          ah.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
        } else {
          img.src = myselfCanvas[0].toDataURL('image/jpg')
          ah.href = img.src
          ah.download = '二维码图片'
          ah.click()
        }
      }
      // base64转blob
      function 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 })
      }

解释一下：可以将downloadQrCode()函数绑定到单独下载的按钮上去，这样就变成一个一个下载的
而  我是使用了匿名函数 一个一个的去生成二维码 并自动去调用下载。