Trying to print a specific part of an Ionic page which contains a long list of items. However, encountering an issue where the entire list doesn't fit on one page and requires scrolling down to view all items.
Expecting the print dialog, triggered by calling printPage(), to recognize that multiple pages need to be printed due to the extensive length of the list. Unfortunately, the dialog only indicates that one page will be printed.
The desired content for printing is located in reports.html:
<div *ngFor="let transaction of transactions" >
<ion-row class="row--line" padding-bottom>
<ion-col col-1>
{{transaction.protocolIdentifier.toUpperCase()}}
</ion-col>
...
</ion-row>
</div>
Utilizing the native browser print function from reports.ts to trigger the print dialog, but it currently shows that only 1 page will be printed instead of multiple as needed.
public printPage(): void {
window.print()
}
To ensure only the specified div is printed, implementing the following code in app.scss:
@media print{
ion-header{ display: none !important; }
.colored-background { display: none !important; }
.dontPrint { display: none !important; }
}
Seeking guidance on how to print multiple pages to accommodate the entire content of the aforementioned div. Note: Development is for a desktop app using Ionic 3*