页面代码:
<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: {
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;
},效果图：