Print only first page

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.

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

Hi kanjiroushi,

did you solve your problem?

If not, then below link was helpful for me:

@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 ="", "PRINT", "height=600,width=800");
    printer.document.write("<title>" + document.title + "</title>");
    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>");

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