如何在打印页面之前等待 DOM 完全加载？答案

【问题标题】：How do I wait for the DOM to load completely before printing the page?如何在打印页面之前等待 DOM 完全加载？
【发布时间】：2020-02-08 11:17:48
【问题描述】：

当尝试在我的 Angular 应用程序上打印页面时，无论是使用 window.print() 还是按 Ctrl + P，打印窗口都会打开，但不会显示页面上的大部分内容。第一次尝试取消后，第二次尝试将在打印窗口中正确呈现页面，但重新加载应用程序将恢复为无法在打印窗口中正确显示内容。

显示的内容是几个<div> 元素，它们被设计为用作边框，以及位于组件树上的父组件的一部分（导航栏组件的一部分）以及整个页脚组件，它们是应用组件的直接子组件。

发生这种情况时，所有内容都会正确显示在页面上，并包含在<ng-container *ngIf="!loading"> 元素中。接收到所有组件数据时，Loading 设置为 false。

组件是这样加载的：

ngOnInit() {
  this.load();
}

load() {
  // data is loaded from a service
  this.loading = false;
  setTimeout(window.print(), 500);
}

我尝试在其他生命周期钩子（ngAfterContentInit、ngAfterViewInit）中调用 window.print() 函数，但没有明显变化。

我也尝试过设置更长的超时时间，最长为 20 秒，但这也没有明显差异。

编辑我尝试在打印尝试之前将document.ready 记录到控制台，它记录为complete

编辑 2 看来问题源于调用window.print() 时样式表未完全加载。我通过将组件的 CSS 移动到单独的文件来管理一个创可贴修复，因为主样式表非常大。尽管解决方案不是最佳的，但它已经解决了问题。

这是在调用window.print() 函数时没有完全加载和渲染DOM 的情况吗？如果是这样，在尝试打印页面之前如何确保它是？

【问题讨论】：

window.addEventListener('DOMContentLoaded', callback ) ?
另外，检查 document.readyState 以确定 DOM 是否已完全加载和/或所有其他内容（图像等）。
此外，打印网页将与屏幕显示不同，因为浏览器（默认情况下）不呈现背景图像和颜色 - 但您可以使用@media print 规则和/或使用 -webkit-print-color-adjust（特定于浏览器）。
@Dai 感谢您的建议。当我在构造函数中添加一个 EventListener 时，它永远不会触发。将document.readyState 记录到控制台会给我complete。我还注意到，当在 Chrome 的打印窗口中，切换“背景图形”选项实际上正确地加载了打印窗口内的页面，但只会更正问题 after 页面显示不正确，然后切换选项。
没有简单的方法来实现它，这里有一些建议 - stackoverflow.com/questions/41379274/… 并且为此目的有一个专用库 - npmjs.com/package/ngx-print

【解决方案1】：

尝试使用 afterviewInt()

ngAfterViewInit() {
   this.load();
}

【讨论】：

【解决方案2】：

ngAfterViewInit() {
   this.load();
   this.cdref.detectChanges();
}

其中 cdref 是 ChangeDetection 的实例 AfterViewInit() 之后的打印页面将加载全部内容。

【讨论】：