4

When trying to print a page on my Angular app, whether by using window.print() or pressing Ctrl + P, the print window opens but doesn't display the majority of the content on the page. After the first attempt is cancelled, a second attempt will render the page correctly in the print window, but reloading the app will revert back to not displaying the content correctly in the print window.

The content that is shown is several <div> elements that are styled to serve as borders, as well as portions of parent components that are very far up the component tree (parts of the navbar component and the entire footer component, which are direct children of the app-component).

All content is correctly displayed on the page when this occurs, and is wrapped in an <ng-container *ngIf="!loading"> element. Loading is set to false when all component data is received.

The component is loaded like so:

ngOnInit() {
  this.load();
}

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

I've tried calling the window.print() function in other lifecycle hooks (ngAfterContentInit, ngAfterViewInit) but with no noticeable change.

I've also tried setting longer timeouts, up to 20 seconds in length, but that also had no noticeable difference.

Edit I tried logging document.ready to the console before the print attempt and it logged as complete

Edit 2 It appears the problem stems from the stylesheet not being fully loaded when window.print() is called. I have managed a bandaid fix by moving the CSS for the component to a separate file, as the main stylesheet is extremely large. Although the solution is not optimal, it has resolved the issue.

Is this a case of the DOM not being fully loaded and rendered when the window.print() function is called? If so, how can I ensure that it is before trying to print the page?

Scott Finnigan
  • 41
  • 1
  • 5
  • `window.addEventListener('DOMContentLoaded', callback )` ? – Dai Oct 11 '19 at 00:11
  • Also, check `document.readyState` to determine if the DOM is fully loaded and/or all other content (images, etc). – Dai Oct 11 '19 at 00:12
  • Also, printing a web-page *will* appear different than on-screen because browsers (by default) do not render background images and colors - but you can override this with a `@media print` rule and/or using `-webkit-print-color-adjust` (which is browser-specific). – Dai Oct 11 '19 at 00:13
  • @Dai Thanks for the suggestions. When I add an EventListener in the constructor it never triggers. Logging ```document.readyState``` to the console gives me ```complete```. I also noticed that when in Chrome's print window, toggling the 'background graphics' option actually correctly loads the page inside the print window, but only corrects the problem *after* page displays incorrectly and the option is then toggled. – Scott Finnigan Oct 11 '19 at 00:40
  • there is no easy way to achieve it, here are few suggestions - https://stackoverflow.com/questions/41379274/print-html-template-in-angular-2-ng-print-in-angular-2/41379912#41379912 & there's a dedicated library for this purpose - https://www.npmjs.com/package/ngx-print – Hemendra Oct 11 '19 at 07:44
  • @Hemendra Thanks for the links. I've managed to band-aid fix the issue, but these may prove useful in future if any further problems arise. – Scott Finnigan Oct 12 '19 at 06:14

2 Answers2

2

Try to using afterviewInt()

ngAfterViewInit() {
   this.load();
}
Bansi29
  • 1,053
  • 6
  • 24
0
ngAfterViewInit() {
   this.load();
   this.cdref.detectChanges();
}

where cdref is instance of ChangeDetection Printing page after AfterViewInit() will have entire content loaded.

Shikha
  • 551
  • 5
  • 20