Page breaks in print view

Ionic Framework Ionic Angular
1

Hi teams,

I’m working on a project with @ionic/angular 5.5.2 and angular 11.0.X.

I’m trying to create printable report for user. To avoid adding a new dependency, I choose to use web capabilities.

All was working fine except dealing with page break :frowning:

CSS marker like

.pagebreak { 
  page-break-after: always; 
  break-after: always; 
}

doesn’t work when I’m trying to print some content in an ion-router-outlet (standard angular router-outlet works).

Is there any way to get page break in an ionic apps on print view ?

Thanks in advance

2

I Finally found the solution. You should use an angular-outlet out of your ion-app and navigate to it to allow you using standard Wb capabilities

<ion-app>
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-app>
<router-outlet name="print"></router-outlet>

Don’t forget to override the body position: fixed by position: static