前端生成二维码代码

页面代码:

市场二维码

    

        [温馨提示] 点击二维码可直接下载
    
    

        

            {{item.name}}
            
            
            
        
    
    

        打印
        返回
    

Vue 中function

data: {

qrCodeVisible: false，
qrs: [],multipleSelection: []

}

//判断是否多选还是未选

operateTips(type, sl) {
    if (sl === 0) {
        this.$message({message: '请选择一个条目', type: 'warning'});
    } else if (sl === 1) {
        return true;
    } else {
        if (type === 'edit') {
            this.$message({message: '只能选择一个条目', type: 'warning'});
        } else if (type === 'del') {
            return true;
        } else if (type === 'yes') {
            return true;
        } else if (type === 'no') {
            return true;
        }
    }
    return false;
},

//下载图片
downloadimg(url, name) {
    let imgData = url;
    var filename = name + '二维码';
    this.downloadFile(filename, imgData);
},
//下载
downloadFile(fileName, content) {
    let aLink = document.createElement('a');
    let blob = this.base64ToBlob(content); //new Blob([content]);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    // aLink.dispatchEvent(evt);
    //aLink.click()
    aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
},
//base64转blob
base64ToBlob(code) {
    let parts = code.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
},

//生成二维码
handleQrcode() {
    if (!this.operateTips('del', this.multipleSelection.length)) {
        return;
    }
    var rows = this.multipleSelection;
    this.qrs = [];
    $('#qrdiv').html("");//清空上次生成的qrcode
    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        console.log('市场名称：', row.name.toString());
        var qrcode = $("#qrdiv").qrcode({
            width: 500, //宽度
            height: 500, //高度
            text: 'http://' + window.location.host + '/sxmarket/wechat/checkScan?salmarketId=' + row.id.toString() + '&salmarketName=' + encodeURI(row.name.toString()) //任意内容,但不能是数字
        }).hide();
        var canvas = qrcode.find('canvas').get(i);
        var data = canvas.toDataURL('image/jpg');
        this.qrs.push({
            name: row.name,
            url: data,
        });
    }
    this.qrCodeVisible = true;
},

效果图：