前端生成二维码代码

页面代码:

<el-button type="primary" icon="el-icon-picture-outline" @click="handleQrcode">市场二维码</el-button>

<el-dialog title="二维码" :visible.sync="qrCodeVisible" :close-on-click-modal="false" top="5vh">
    <div style="margin-top: -5%">
        <i class="el-icon-bell" style="color: #c43c35">[温馨提示] 点击二维码可直接下载</i>
    </div>
    <div id="qr-div">
        <div v-for="item in qrs" style="display: inline-block;margin-left: 10px;margin-top: 10px;">
            <el-row type="flex" justify="center" style="margin-bottom: 5px;"><span>{{item.name}}</span></el-row>
            <el-row type="flex" justify="center" style="margin-bottom: 5px;">
            <img style="width: 150px;height: 150px" :src="item.url" @click="downloadimg(item.url,item.name)"/>
            </el-row>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="printCode">打印</el-button>
        <el-button type="warning" @click.native="qrCodeVisible = false">返回</el-button>
    </div>
</el-dialog>

<div id="qrdiv"></div>

Vue 中function

data: {

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

}

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

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;
},

效果图：