二维码打包的时候 需要for循环一直显示domCls为空,但是又能打印出domCls
downloadZip 方法里添加定时器
<!-- 二维码 -->
<div id="ziptable" style="visibility:hidden;">
<Qrcode
:qrUrl="item.qrCode"
:qrText="item.typeTranslation"
v-for="item in qrCodelist"
:key="item.type"
></Qrcode>
</div>
//methods里调用接口
downloadcode(row) {
getVerificationCode(this.$qs.stringify({ memberId: row.id })).then(
res => {
if (res.code == 200) {
this.qrCodelist = res.result;
this.downloadZip();
}
}
);
},
// 压缩并下载二维码
downloadZip() {
setTimeout(() => {
let dom = [];
let domCls = document
.getElementById("ziptable")
.getElementsByClassName("qrcode_box");
console.log(domCls, domCls.length);
for (let index = 0; index < domCls.length; index++) {
dom.push(domCls[index].getElementsByClassName("canvas")[0]);
}
let zip = new JSZip();
let img = zip.folder("");
for (let index = 0; index < dom.length; index++) {
img.file(
`${this.qrCodelist[index].typeTranslation}${this.qrCodelist[index].qrCode}.png`,
dom[index]
.toDataURL("img/png")
.substring(dom[index].toDataURL("img/png").indexOf(",") + 1),
{ base64: true }
);
}
// 图片是base64格式, 但不要base64前缀;
zip.generateAsync({ type: "blob" }).then(function(content) {
FileSaver.saveAs(content, "投递码.zip");
});
}, 200);
},
上网查阅发现问题可能是由于mounted 不会承诺所有的子组件也都一起被挂载。
这个时候dom元素还有没挂载完毕。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:
mounted () {
this.$nextTick(() => {
})
},
但是不清楚为什么使用了这个方法后获取的length依旧为0。
问题
在mounted阶段,获取Element对象,console.log()可以读取出列表,而却无法读出它的length。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}