Print only first page

Ionic Framework Ionic Angular
1

I have an ionic app made with latest version with angular 11 and when I try to print the app, only the first page is printed. When I use the print emulator on chrome I have the scrolling but looks like the real print vesion hasn t get the scrolling and thus is blocking. Maybe it is linked to shadow root or something. Can t find any solution.

I checked CSS media query for printing scrollable content and solution doesn’t work.

If someone faced this issue I am all ear.

2

It is worse than that, after further investigation, it only print what is currently displayed on the screen. If I emulate the print css, scroll a bit and print the page, it only displays the content at the current scrolling position. I Wonder if it is not linked to the css contain property or other new fancy rendering thingy.

Hair pulling this issue really

3

Hi kanjiroushi,

did you solve your problem?

//Edit
If not, then below link was helpful for me:

4

@3kSolutions @kanjiroushi ran into this problem as well, but our pages were too complicated to override all the CSS to make it work.

So instead we went this route javascript - Ionic 5 with Angular 9: How to Print from Desktop (not mobile device) - Stack Overflow.

printPage(id, title = "", subtitle = "") {
  let element = document.getElementById(id);
  if (element) {
    let printer = window.open("", "PRINT", "height=600,width=800");
    printer.document.write("<html><head>");
    printer.document.write("<title>" + document.title + "</title>");
    printer.document.write("</head><body>");
    if (title && title.length > 0) {
      printer.document.write("<h2>" + title + "</h2>");
    }
    if (subtitle && subtitle.length > 0) {
      printer.document.write("<h3>" + subtitle + "</h3>");
    }
    printer.document.write("<div>" + element.innerHTML + "</div>");
    printer.document.write("</body></html>");
    printer.document.close();
    printer.focus();
    printer.print();
    printer.close();
  }
},

Now we can call the printPage method from anywhere with an element id and optional title and subtitle, it prints multiple pages without any formatting. :printer: :ok_hand:

1 Like