downloadSelectQrcode() {
const _this = this;
if (_this.selectionList.length === 0) {
_this.$message.warning("请选择至少一条数据");
return;
}
_this
.$confirm("是否确认下载已选建筑的建筑码?", {
confirmButtonText: "确定",
cancelButtonText: "取消"
})
.then(() => {
_this.selectionList.forEach(row => {
_this.mutiGenerateQRCodeAndDownload(row);
});
this.$refs.crud.toggleSelection();
});
},
async mutiGenerateQRCodeAndDownload(row) {
// 二维码链接
let url="xxx";
// 文件名称为 编号+昵称
const qrCodeFileName = `${row.code}${
row.anotherName ? "-" + row.anotherName : ""
}`;
// 创建一个临时DOM元素来承载二维码
const qrCodeDiv = document.createElement("div");
qrCodeDiv.style.background=`url(${QRCodeBgIamge})`
qrCodeDiv.style.position = "relative";
qrCodeDiv.style.width = "300px";
qrCodeDiv.style.height = "475px";
qrCodeDiv.style.display = "flex";
qrCodeDiv.style.alignItems = "center";
qrCodeDiv.style.justifyContent = "center";
qrCodeDiv.style.backgroundSize = "100% 100%";
const childDiv =document.createElement("div");
childDiv.style.position = "absolute";
childDiv.style.top = "190px";
childDiv.style.left = "70px";
qrCodeDiv.appendChild(childDiv);
document.body.appendChild(qrCodeDiv);
// 使用qrcodejs2生成二维码
new QRCode(childDiv, {
text: url,
width: 160,
height: 180,
});
// 获取canvas对象
const canvas = await html2canvas(qrCodeDiv);
if (canvas) {
// 将canvas转换为DataURL
const dataURL = canvas.toDataURL("image/png");
// 创建一个a标签用于下载
const link = document.createElement("a");
link.href = dataURL;
link.download = `${qrCodeFileName}.png`; // 设置下载文件的名称
link.click(); // 触发下载
// 清理临时DOM元素
document.body.removeChild(qrCodeDiv);
} else {
console.error("无法找到二维码的canvas元素");
}
},
特别需要注意的是,如果不止想把canvas(ps:qrcodejs2挂到一个div标签时会直接在div标签里建一个canvas把二维码画出来)里二维码下载下来,还要加上父亲div的一些图片样式,即使我们不需要它展示出来,但是不能直接设置display="none"或者visibility: hidden,前者会让下载下来的图片直接无法显示(因为html2canvas获取不到元素),后者会让图片一片白,在最后从body里把这个暂时的dom节点remove掉就好了
如果你直确实只要二维码,那可以设置display="none"或者visibility: hidden,因为可以直接操作canvas对象
temDiv.querySelector("canvas"); 直接访问canbas对象,这样就可以绕开html2canvas了