打印的数据是来源于后台请求回来的数据,一开始不知道具体的内容长度,所以当打印界面出现的时候,页面只有加载出来的数据的大小,此时打印就不是我们想要的。
首先,我们将要打印的数据放置的空间大小设定好,这样的话打印的尺寸就不会自适应去改变。数据会在限制的尺寸上自动换行排序。同时设置样式为居中,这里暂时设定死了A4的尺寸,所以只适合竖向打印,不适合横向。
componentDidMount () {
document.body.style.width = '29.7cm';
document.body.style.margin = '0 auto';
document.body.style.position = 'relative';
this.doFetch();//请求数据
}
打印的过程其实是把网页内容变为一张张img之后打印,因此在请求数据来到之后对图片的数据进行判断,当图片加载的总数据计数大于图片真实总数据时,即所有图片都加载已完成,此时,就可以打印了。
async doFetch () {
const data = await fetch(`url`);
this.setState({data:data}, () => {
let imgs = Dom.queryAll('img');
let finished = 0;
let finish = ()=> {
finished++;
if(finished >= imgs.length){
window.print();
}
}
imgs.forEach((img)=>{
img.style.maxWidth = '100%';
img.onload = function(){
finish();
}
});
});
}
欢迎关注我的公众号,两只摩羯程序员的日常更新~~