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

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

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

Все содержимое правильно отображается на странице, когда это происходит, и заключено в элемент <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()? Если да, то как я могу убедиться в этом, прежде чем пытаться распечатать страницу?


angular angular8 dom printing-web-page
person Scott Finnigan    schedule 11.10.2019    source источник
comment
Также проверьте document.readyState, чтобы определить, полностью ли загружена DOM и / или весь другой контент (изображения и т. Д.).   -  person Dai    schedule 11.10.2019
comment
Кроме того, печать веб-страницы будет выглядеть иначе, чем на экране, потому что браузеры (по умолчанию) не отображают фоновые изображения и цвета, но вы можете переопределить это с помощью правила @media print и / или с помощью -webkit-print-color-adjust ( что зависит от браузера).   -  person Dai    schedule 11.10.2019
comment
@Dai Спасибо за предложения. Когда я добавляю EventListener в конструктор, он никогда не срабатывает. Запись document.readyState в консоль дает мне complete. Я также заметил, что в окне печати Chrome переключение параметра «фоновая графика» на самом деле правильно загружает страницу внутри окна печати, но только исправляет проблему, после страница отображается некорректно, а затем параметр переключается.   -  person Scott Finnigan    schedule 11.10.2019
comment
нет простого способа добиться этого, вот несколько предложений - stackoverflow.com/questions/41379274/ и для этой цели есть специальная библиотека - npmjs.com/package/ngx-print   -  person Hemendra    schedule 11.10.2019
comment
@Hemendra Спасибо за ссылки. Мне удалось исправить проблему пластырем, но они могут пригодиться в будущем, если возникнут какие-либо проблемы.   -  person Scott Finnigan    schedule 12.10.2019

Ответы (2)


arrow_upward
2
arrow_downward

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

ngAfterViewInit() {
   this.load();
}
person Bansi29    schedule 11.10.2019

arrow_upward
0
arrow_downward 

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

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

person Shikha    schedule 11.10.2019
comment
Пользователь упомянул в вопросе, что хук afterViewInit () у него не сработал. - person Hemendra; 11.10.2019