vue实现生成二维码并下载到本地

1.生成二维码

vue生成二维码图片，这里使用的是qrcode.js 这个插件

下载插件

npm install --save qrcodejs2

在vue中使用插件

    import QRCode from 'qrcodejs2'

指定二维码存放容器

    <div style="margin-top: 20px;">
        <!--存放二维码-->
      <div class="qrcode" id="qrcode" ref="qrCodeUrl" style="margin-top:20px;"></div>
    </div>

调用方法生成二维码

            creatQrCode(bikeCode) {
                var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                    text: 'http://baidu.com/' + code, // 需要转换为二维码的内容
                     100,
                    height: 100,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                })
            },

2.下载二维码

批量下载二维码，前提是要有二维码存在

            getDownload() {
                var img = document.querySelectorAll('.qrcode img')
                for(var i = 0; i < img.length; i++){
                    var url = img[i].src
                    var a = document.createElement("a");
                    var event = new MouseEvent("click"); // 创建一个单击事件
                    a.href = url;
                    a.download = this.codeList[i]+'.png'// 图片名称
                    a.dispatchEvent(event); // 触发a的单击事件
                }
            },

调用方法即可实现二维码下载到本地