Printing on Mobile does not work

[fabiolooo]

Printing on mobile devices does not work with this code. Tried it with different devices and browsers. (Android/Chrome, Android/Brave, iOS/Chrome, iOS/Safari)

Someone has a solution/workaround for this? Any help is appreciated

[fabiolooo]

After hours of debugging... The route to print null seems to be the problem. this.router.navigate([{ outlets: { print: null }}]); This code got executed before the print dialog opens.

I tried to wrap it in the afterprint-event without any success. This does not work properly on google chrome on adroid. https://developer.mozilla.org/en-US/docs/Web/API/Window/afterprint_event The afterprint-event fires immediately when print dialog opens.

My workaround is as follows: ` export class PrintService { constructor(private router: Router) { }

printPage(param1: string, param2: number) {
  this.cleanup();
  setTimeout(() => {
    this.router.navigate(['/',
      { outlets: {
        print: ['print', 'page', param1, param2]
      }}]);
  }, 100);
}

cleanup() {
  this.router.navigate([{ outlets: { print: null }}]);
}

onDataReady() {
  // Dirty Hack to clean Printing Route.
  // this is only necessary because window.onafterprint event does not work on mobile chrome.
  setTimeout(() => {
    this.cleanup();
  }, 8000);

  setTimeout(() => {
    window.print();
  }, 100);
}

}`

[jpdga-shizuoka]

@fabiolooo I also tried this issue for my self, then I've got a working code. Thanks for your hints.

[dannymorson]

After hours of debugging... The route to print null seems to be the problem. this.router.navigate([{ outlets: { print: null }}]); This code got executed before the print dialog opens.

I tried to wrap it in the afterprint-event without any success. This does not work properly on google chrome on adroid. https://developer.mozilla.org/en-US/docs/Web/API/Window/iconicsgraphics/afterprint_event The afterprint-event fires immediately when print dialog opens.

My workaround is as follows: ` export class PrintService { constructor(private router: Router) { }

printPage(param1: string, param2: number) {
  this.cleanup();
  setTimeout(() => {
    this.router.navigate(['/',
      { outlets: {
        print: ['print', 'page', param1, param2]
      }}]);
  }, 100);
}

cleanup() {
  this.router.navigate([{ outlets: { print: null }}]);
}

onDataReady() {
  // Dirty Hack to clean Printing Route.
  // this is only necessary because window.onafterprint event does not work on mobile chrome.
  setTimeout(() => {
    this.cleanup();
  }, 8000);

  setTimeout(() => {
    window.print();
  }, 100);
}

}`

I'm having the same problem, have you found the solution yet?

[fabiolooo]

No, I still have the same workaround.