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()函數綁定到單獨下載的按鈕上去，這樣就變成一個一個下載的
而  我是使用了匿名函數 一個一個的去生成二維碼 並自動去調用下載。