在vue中使用qrcodejs2生成二维码并保存下载

安装插件

npm install qrcodejs2 --save

在template中使用

保存到本地

按需引入

import QRCode from 'qrcodejs2';
data:{
    return {
        qrcode: null
    }
},
methods: {
    // 生成二维码
    creatQrCode(qrcodeUrl) {
        let text = qrcodeUrl || 'http://www.baidu.com';
        this.qrcode = new QRCode(this.$refs.qrCodeDiv, {
            text: encodeURIComponent(text), //二维码地址，避免识别不了url地址将进行编码
            width: 256, //单位（px）
            height: 256, //单位（px）
            colorDark: "#000000", //二维码颜色：支持英文、十六进制、RGB、RGBA
            colorLight: "#FFFFFF", //二维码背景色：支持英文、十六进制、RGB、RGBA
            render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
            correctLevel: QRCode.CorrectLevel.L, //容错率，由低到高：L/M/Q/H
        })
    },
    // 保存下载二维码
    downloadCode(){
        let img = document.getElementById('qrcode').getElementsByTagName('img')[0];
        // 构建画布
        let canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext('2d').drawImage(img, 0, 0);
        // 构造url
        let url = canvas.toDataURL('image/png');
        document.getElementById('downloadImg').setAttribute('href', url);
        document.getElementById('downloadImg').setAttribute('download', '我的二维码.png');
        document.getElementById('downloadImg').click();
    },
},
beforeDestroy() {
    this.$refs.qrCodeDiv.innerHTML = ''; //清除二维码方法一
    // this.qrcode.clear(); // 清除二维码方法二
},

调用方法

let qrcodeUrl = 'www.baidu.com';
this.creatQrCode(qrcodeUrl);