最近有个需求:批量打印个人信息卡,卡片内容有个人头像和背景图片等。
实现过程中出现的问题:图片偶发性加载一半或者完全没有图片。
解决:等待图片完全加载完毕才调用打印方法。
实现如下:
//html部分
<div class="infoCard" v-for="(item,index) in dataList" :key="item.id" class="bgPic">
<img @load="loadImg" :src="item.imageUrl>
<div style="page-break-before: always"></div> --分页
</div>
//js部分:加载完成才打印
loadImg(val){ this.imgList.push(val); if(this.imgList.length==this.dataList.length){ window.print(); this.imgList=[] ... } },
//css部分:每个分页背景图设置
.bgPic{ width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-image: url('../../assets/img/bg/infoBgPic.jpg'); padding:20px; box-sizing: border-box; margin-bottom: 20px;//分页的缝隙,否则会导致分页图片内容上移 }