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, // 需要轉換為二維碼的內容
                    width: 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的單擊事件
                }
            },

調用方法即可實現二維碼下載到本地