vue 动态二维码做成

首先创建一个div：

<el-dialog title="二维码" :visible.sync="dialog" :center="true" :close-on-click-modal="true" :show-close="true" width="800px">
            <div v-for="(item,index) in indexLists" :key="index">
                <div>{{ item }}</div>
            </div>
            <div id="qrCode" ref="qrCodeDiv" @click="downs()"></div>
        </el-dialog>

在给ref赋值：

bindQRCode: function (url) {
        this.$refs.qrCodeDiv.innerHTML = "";
        new QRCode(this.$refs.qrCodeDiv, {
          text: url,
          width: 200,
          height: 200,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
         })
        },

你在那个地方需要调用这个二维码就调用这个方法！如：

popUp(url,password){
            this.dialog = true
            this.dataModel.url = '链接：' + url
            this.dataModel.password = '密码：' + password
            this.indexLists = this.dataModel
            this.$nextTick(function () {
                this.bindQRCode(url);
            })
        },

这个是防止再次打开页面出现多个二维码把上一个清空！

this.$refs.qrCodeDiv.innerHTML = "";

@click=“downs()”

这个方法是点击二维码进行下载！

downs() {
            //找到canvas标签
            let myCanvas = document.getElementById('qrCode').getElementsByTagName('canvas');
            let img=document.getElementById('qrCode').getElementsByTagName('img')
            // // //创建一个a标签节点
            let a= document.createElement("a")
            // //设置a标签的href属性（将canvas变成png图片）
            let imgURL=myCanvas[0].toDataURL('image/jpg');
            let ua = navigator.userAgent;
            if (ua.indexOf("Trident") != -1 && ua.indexOf("Windows") != -1) { // IE内核 并且  windows系统 情况下 才执行;
                var bstr = atob(imgURL.split(',')[1])
                var n = bstr.length
                var u8arr = new Uint8Array(n)
                while (n--) {
                  u8arr[n] = bstr.charCodeAt(n)
                }
                var blob = new Blob([u8arr])
                window.navigator.msSaveOrOpenBlob(blob, '下载' + '.' + 'png')
            }else if(ua.indexOf("Firefox") > -1){ //火狐兼容下载
                let blob = this.base64ToBlob(imgURL); //new Blob([content]);
                let evt = document.createEvent("HTMLEvents");
                evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
                a.download = ' ';//下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
                a.href = URL.createObjectURL(blob);
                a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
            }else{ //谷歌兼容下载
                img.src=myCanvas[0].toDataURL('image/jpg');
                // a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
                a.href=img.src
                //设置下载文件的名字
                a.download = "下载"
                 //点击
                a.click()
            }
        },

得到的效果！

点击二维码
然后点击二维码进行下载！