angular——打印之坑（nz-modal里打印，出现打印不完全的问题）

项目场景：

对话框中点击打印，打印数据不全

以下是相同数据，产生的打印情景

• 异常页面：
  
• 正常页面：
  

---

问题描述：

打印数据量超过一页，点击打印后数据仅有一页，且页面最后混乱，其余数据已获取但不显示

---

原因分析：

在显示对话框时，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);
}