Background: I'm trying to print a specific part of an Ionic page consisting of a long list of items. The issue is that I can't print the entire list of items once it doesn't fit on one page (and one has to scroll down to see all items).
I would expect the print dialog which opens upon calling printPage() to recognize that multiple pages should be printed since the complete list of items doesn't fit one one page. The print dialog box however remarks that only one page will be printed
This is the content I want to print: (from reports.html)
<div *ngFor="let transaction of transaction" >
<ion-row class="row--line" padding-bottom>
<ion-col col-1>
</ion-col>
...
</ion-row>
</div>
I'm using the native browser print function which is invoked from reports.html in reports.ts upon calling which the print dialog box opens automatically, showing that 1 of 1 pages will be printed. (should be 1 of n pages however)
public printPage(): void {
window.print()
}
To only print the contents of that particular div, I'm using the following in my app.scss: (found at https://github.com/ionic-team/ionic/issues/12002 which is related to my issue)
@media print{
ion-header{ display: none !important; }
.colored-background { display: none !important; }
.dontPrint { display: none !important; }
}
My question now is how to print as many pages as are required to fit the whole content of the above mentioned div. Please note that I'm developing for a desktop app, not mobile, using Ionic 3*
from Can't print entire content of Ionic 3 page
No comments:
Post a Comment