项目场景:
对话框中点击打印,打印数据不全
以下是相同数据,产生的打印情景
- 异常页面:
- 正常页面:
问题描述:
打印数据量超过一页,点击打印后数据仅有一页,且页面最后混乱,其余数据已获取但不显示
原因分析:
在显示对话框时,html会增加个classcdk-global-scrollblock
,打印替换时,该class还会存在,导致页面不能被全打印出来,其中主要是position: fixed;
影响了整个页面布局
.cdk-global-scrollblock {
position: fixed;
width: 100%;
overflow-y: scroll;
}
没问题的html
有问题的html
解决方案:
获取打印数据后,先关闭对话框,打印结束后再根据实际情况判断是否需要重启对话框
// 关闭弹窗,msgVisible 是双向绑定的
handleCancel() {
this.msgVisible = false;
this.msgVisibleChange.emit(false);
}
handlePrint() {
this.handleCancel(); // 解决出现打印不全的关键
let printEle;
printEle = document.getElementById('print').cloneNode(true);
this.renderer.setStyle(document.body, 'display', 'none');
this.renderer.setStyle(printEle, 'display', 'block');
this.renderer.appendChild(document.body.parentElement, printEle);
let time = this.printList.length > 500 ? this.printList.length : 500;
setTimeout(() => {
window.print();
}, time);
setTimeout(() => {
this.renderer.removeChild(document.body.parentElement, printEle);
this.renderer.setStyle(document.body, 'display', 'block');
this.msgVisible = true;
this.msgVisibleChange.emit(true);
}, time + 160);
}