1.导入npm install qrcodejs2 --save
引用页面导入
import QRCode from ‘qrcodejs2’;
import html2canvas from “html2canvas”;//下载图片
downLoadQcode(){
//关系图截取
if (!document.getElementById('qrcode').getElementsByTagName('img')[0]) {
this.$alert("暂无二维码下载", "信息", {
confirmButtonText: "确定"
});
return false;
}
html2canvas(document.getElementById('qrcode').getElementsByTagName('img')[0]).then(canvas => {
this.imgmap = canvas.toDataURL();
if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(this.imgmap.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,
this.currow.UnitName + '二维码.png'
);
} else {
// 这里就按照chrome等新版浏览器来处理
const a = document.createElement("a");
a.href = this.imgmap;
a.setAttribute("download", this.currow.UnitName + '二维码');
a.click();
}
});
},
//生成二维码
creatQrCode(row) {
let Base64 = require('js-base64').Base64;
var data = { UnitCode: row.unitCode, UnitName: row.unitName, BussinessType: encodeURI(row.businessType) };
this.currow=data;//用于下载二维码时命名
var text = JSON.stringify(data);
var params = "https://123.1.1.1/wxapp/" + Base64.encode(text);
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: params, // 需要转换为二维码的内容
width: 400,
height: 400,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
},