打印数据来自后台请求是打印显示不完整的问题解决

打印的数据是来源于后台请求回来的数据，一开始不知道具体的内容长度，所以当打印界面出现的时候，页面只有加载出来的数据的大小，此时打印就不是我们想要的。

首先，我们将要打印的数据放置的空间大小设定好，这样的话打印的尺寸就不会自适应去改变。数据会在限制的尺寸上自动换行排序。同时设置样式为居中，这里暂时设定死了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();
                }
            });
        });
    }

欢迎关注我的公众号，两只摩羯程序员的日常更新~~