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?
//Edit
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 = 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. 
