生成二维码的插件有两个分别是qrcodejs2和vueQr,vueQ生成的二维码中间可以放头像
本项目是vueQr,搭配el-table一起使用
下载依赖包 cnpm install vue-qr --save
页面引入 import vueQr from "vue-qr";
components: { vueQr },
页面结构
<div id="qrcode" ref="qrcode"></div>
<el-table
:data="tableDatas"
style="width: 100%"
max-height="600px"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" fixed />
<el-table-column prop="drname" label="二维码">
<template slot-scope="{ row }">
<el-tooltip content="点击下载二维码" placement="top-start">
<span @click="downloadImg(row.drid, row.drname)">
<vue-qr
:ref="'Qrcode' + row.drid"
:text="
'path:' +
142 +
',' +
'drid:' +
row.drid +
',' +
'mdcode:' +
row.mdcode +
',' +
'drname:' +
row.drname +
',' +
'drtypeid:' +
row.drtypeid
"
:margin="10"
:size="500"
:width="30"
/>
</span>
</el-tooltip>
</template>
</el-table-column>
</el-table>
//text扫码获取的内容
属性说明:
downloadImg()
生成二维码之后下载的方法
downloadImg(link_id, name) {
console.log(link_id, name);
const iconUrl = this.$refs["Qrcode" + link_id].$el.src;
//console.log(iconUrl, "iconUrl");
this.downloadFile(name, iconUrl);
},
downloadFile(fileName, content) {
let aLink = document.createElement("a");
let blob = this.base64ToBlob(content); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
// console.log("点击下载", evt);
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型,是否冒泡,是否阻止浏览器的默认行为
aLink.download = fileName; //图片的名称
aLink.href = URL.createObjectURL(blob);
// aLink.dispatchEvent(evt);
aLink.click();
// 下载完成之后移除a的事件
document.body.removeChild(aLink);
},
// 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 });
},
最后效果
qrcodejs2只是简单做的Demo,也能生成二维码.只是下载有点麻烦最后采用的是vueQr
生成二维码方法
qrcode() {
let mdcode = this.property[0].mdcode == null ? "" : this.property[0].mdcode;
let reg = /[0-9]+/g;
let projectId = parseInt(this.path);
let name = this.path.replace(reg, "");
let drid = this.property[0].drid;
let drname = this.property[0].drname;
let drtypename = this.property[0].drtypename;
new QRCode("qrcode", {
width: 232, // 设置宽度
height: 232, // 设置高度
text: `设备编号: ${mdcode},项目ID: ${projectId},项目名: ${name},设备ID: ${drid},设备名称: ${drname},设备类型: ${drtypename}`,
});
},
// 生成二维码
createQRcode() {
if (this.property.length != 1) {
this.$message.error("选择设备资产数量超过1或者未选择设备资产!");
} else {
let qrcode = document.getElementById("qrcode");
qrcode.innerHTML = "";
this.$nextTick(function () {
this.qrcode();
});
}
},