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

最新推荐文章于 2024-03-14 10:35:30 发布

原创最新推荐文章于 2024-03-14 10:35:30 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#自动生成二维码 #批量下载二维码 #vue.js

vue学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用qrcodejs2库批量生成二维码并自动下载的方法。通过将字符串数组转换为二维码，每个二维码生成后立即触发下载，适用于需要批量处理二维码的场景。

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

一般分为生成一个二维码展示并下载，对于这种你只需调用 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()函数绑定到单独下载的按钮上去，这样就变成一个一个下载的
而我是使用了匿名函数一个一个的去生成二维码并自动去调用下载。