Unable to display complete content of Ionic 3 webpage

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*

Answer №1

Can you please attempt changing the *ngFor statement as shown below?

<div *ngFor="let transaction of transactions" >

This would modify your code to look like this:

  <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>

Answer №2

It appears that the issue lies with Ionic only rendering part of the page in the DOM, limited to what is visible within the viewport. To overcome this challenge, a feasible solution would be to utilize a module for transforming your HTML content into a PDF format, which can then be sent for printing.

Explore:

https://www.npmjs.com/package/jspdf-autotable

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Should the refresh button be displayed once the animation finishes?

Can anyone provide guidance on how to write jQuery code that will reveal a hidden button after an animation is finished? The button should also be able to refresh the animation for the user to watch again. Check out this fiddle: http://jsfiddle.net/rabela ...

Displaying an image in AngularJS using a byte array received in the response

Dealing with a service that adds properties to a file and returns it as a byte array in the response. I'm struggling to display it properly since it's in byte form. Attempted converting it to base64 but still showing raw bytes. PNG IHDR&L ...

What is the best way to make a scrollable `div` that is the same height as my `iframe` with Material-UI?

I am developing a responsive Video Player with an accompanying playlist designed for Desktop and larger screens. The playlist has the potential to contain a large number of items, possibly in the hundreds. To view my progress so far, please visit https:// ...

When attempting to access the Angular app in Edge, it automatically redirects to open in IE 11 instead

I have encountered an issue with my angular 5 App. It works perfectly fine in Chrome and Firefox, but when I try to open it in Microsoft Edge on Windows 10, the application always opens in the IE 11 browser. There are no errors displayed on the console. W ...

A step-by-step guide on integrating a Django template tag and HTML element into an HTML page using Javascript

Is there a safe way to insert HTML that includes Django template tags using JavaScript in my project? For instance, if my template contains the following code: <div id="some-element"> <span id="my-tag">{{ my_data }}</sp ...

Customize the appearance of tables in your WordPress theme

I'm currently working on a website using the Wordpress Twenty Ten theme and I've run into an issue with inserting html tables. The theme seems to be overriding my styling, resulting in very unattractive tables. I've attempted to fix this pro ...

Bootstrap glyphicon not in sync with input field alignment

Having an issue with aligning the upper border of a search input field when using Angular with Bootstrap and adding a glyphicon next to it. div.input-group(ng-show='feeds.length > 0') span.input-group-addon.glyphicon.glyphicon-search in ...

Issue: Unhandled promise rejection: SecurityError: To use screen.orientation.lock(), the page must be in fullscreen mode

While attempting to change the orientation of one of my pages in an Ionic 3 app, I encountered the following error. The code snippet below was used to change from portrait mode to landscape mode: ionViewDidEnter() { // this.statusBar.hide(); // // ...

Partial button clickability issue

There is a puzzling error where the button in the 'red area' is not clickable, and I can't seem to figure out why. Below are images illustrating the issue: https://i.stack.imgur.com/aPfcR.png https://i.stack.imgur.com/v5knZ.png Upon reac ...

Working with double quotes within variable in JavaScript

I am currently working on dynamically creating HTML tags using JavaScript. Please take a look at the code snippet below: function getPhotosSuccess(data) { if (data.d.results.length > 0) { var response = data.d.results; var innerht ...

Converting HTML to an array using Angular

Is there a way to convert HTML into an array of entities? For example: 'hi <em>there</em>' => ['hi', '<em>', 'there', '</em>'] ...

I am looking to implement screen reader capabilities for both the select-2 combo box and bootstrap's datetime-picker. How can I go about doing

On my existing website, I have select-2 combo boxes for drop-down lists and a Bootstrap Calendar widget. While these features work well, they lack accessibility for users with disabilities. In an effort to make the website inclusive for everyone, I am work ...

Pattern matching for replacing <a> tags

As a beginner in the world of regular expressions, I am eager to learn more about it. Currently, my goal is to extract only the inner text from an HTML tag and remove the surrounding tags. For example: Original: Lorem ipsum <a href="http://www.google.e ...

How to hide text within a contenteditable element

I'm trying to create a contenteditable span that behaves like a password field in a Linux terminal; the text is entered, but not visible. I've experimented with different CSS properties like visibility: hidden and display: none, but they don&apos ...

Modify the button's background color for Django's image upload field

In one of the forms in my Django application, I have included a field that allows users to upload an image. Here is the code for this field: image = models.ImageField(upload_to=upload_location, null=True, blank=True) To display this field in my form tabl ...

Modify the input value when using the get_search_form() function in Wordpress

After experimenting with the latest get_search_form() function in WordPress, I've encountered an issue where I can't figure out how to remove the text label from the search submit button. Does anyone have any suggestions or solutions for this pr ...

Simply click and drag a document from your file explorer directly into the desired text field to instantly generate a clickable

I am interested in dragging a file from our Windows server and dropping it onto a text area on a webpage. The link that would be generated will look something like this: <a href="\\fileserver\folder\pizza_2.pdf">filename.pdf< ...

My goal is to create a stylish form using bootstrap and CSS3

I am aiming to replicate the layout of this particular page: https://i.sstatic.net/HxOhC.png Struggling to utilize css3 for designing, how can I achieve a form similar to this? Facing difficulty in creating the outer red border and inserting spacing betw ...

Here's a quick tip for adding a new line in your input message in Angular - just press Shift +

I need help with my chat box input field. I want it to be able to handle new line inputs similar to Facebook's chatbox. Here is a screenshot of My Chat Box: [1]: https://i.sstatic.net/NeG7d.png My HTML code for the input field: <form class=" ...

Having trouble retrieving data in Angular from the TypeScript file

demo.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-demo', templateUrl: './demo.component.html', styleUrls: ['./demo.component.css'] }) ...