Как мне дождаться полной загрузки DOM перед печатью страницы?

Question

При попытке распечатать страницу в моем приложении Angular, будь то с помощью window.print () или нажатием Ctrl + P, окно печати открывается, но не отображает большую часть содержимого на странице. После отмены первой попытки вторая попытка правильно отобразит страницу в окне печати, но при перезагрузке приложения вернется обратно к некорректному отображению содержимого в окне печати. ​​

Содержимое, которое is показано несколько элементов <div>, стилизованных для использования в качестве границ, а также части родительских компонентов, которые находятся очень далеко от дерева компонентов (части компонента navbar и весь компонент нижнего колонтитула, которые являются прямыми дочерними элементамикомпонента приложения).

Все содержимое правильно отображается на странице, когда это происходит, и заключено в элемент <ng-container *ngIf="!loading">. Загрузка получает значение false, когда получены все данные компонента.

Компонент загружается следующим образом:

ngOnInit() {
  this.load();
}

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

Я пытался вызвать функцию window.print() в других перехватах жизненного цикла (ngAfterContentInit, ngAfterViewInit), но без заметных изменений.

Я также пытался установить более длительные таймауты, до 20 секунд, но это также не имело заметной разницы.

Редактировать Я попытался записать document.ready на консоль перед попыткой печати, и он вошел в систему как complete

Редактировать 2 Кажется, проблема связана с тем, что таблица стилей загружается не полностью, когда window.print() называется. Мне удалось исправить ошибку, переместив CSS для компонента в отдельный файл, так как основная таблица стилей очень большая. Хотя решение не является оптимальным, оно решило проблему.

Является ли это случаем, когда DOM не полностью загружается и отображается при вызове функции window.print()? Если это так, как я могу убедиться в этом, прежде чем пытаться распечатать страницу?

Answer 1

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

, где cdref - это экземпляр страницы печати ChangeDetection после того, как AfterViewInit () загрузит весь контент.

Answer 2

Попробуйте использовать afterviewInt ()

ngAfterViewInit() {
   this.load();
}