vue 批量成二维码 qrcodejs2 使用JSZIP打包下载

根据内容在前端生成二维码插件 qrcodejs2

1. cnpm i qrcodejs2 -S

2.html部分，这里在for循环内加了个盒子，并且给id绑定为+index，使它生成不同id的盒子

qrcodejs2 会根据id找到盒子，并向内添加一个二维码绘制的canvas

<div :id="'qrcode'+index‘"></div>

3.js部分老规矩先在页面中import一下，再注册一下

import QRCode from 'qrcodejs2'

import JSZip from 'jszip'

import FileSaver from 'file-saver'

components: {QRCode}

data

methods:{

   

// 批量生成二维码且打包压缩zip下载

            downloadQRcode() {

                var that = this

                this.loading = true

                var zip = new JSZip()

                var img = zip.folder("images")

                var imageStr = ''

               // 在页面中展示生成的二维码

                for (var i=0; i< this.json_data.length; i++) {

                        var qrcode = new QRCode('qrcode'+i, {

                        width: 200,  // 设置宽度

                        height: 200, // 设置高度

                        text: this.json_data[i]

                    })

                   // 生成的二维码从canvas转成base64 放入到文件夹中

                    var imgs = document.getElementById('qrcode'+i).getElementsByTagName("canvas")

                    var url = imgs[0].toDataURL("image/png")

                  // 转换后的文件如果带有data:image，base64：标识，解压后的png无法打开，所以去除掉

                    var regex = /data:image\/.*;base64,/

                    url = url.replace(regex,"")

                    img.file(this.json_data[i] + ".png", url, {base64: true})

                }

                // JSzip，将二维码文件夹压缩并且模拟点击下载

                zip.generateAsync({type:"blob"}).then(function(content) {

                    var filename = '二维码' + '.zip'

                    var eleLink = document.createElement('a')

                    eleLink.download = filename

                    eleLink.style.display = 'none'

                    eleLink.href = URL.createObjectURL(content)

                    document.body.appendChild(eleLink)

                    eleLink.click()

                    document.body.removeChild(eleLink)

                    that.loading = false

                })

            }

}