The lack of any comments suggests that there is no simple solution to this, so I came up with the following:
- I made a new pageControl solely for print preview. This page will also register for printing and automatically show the print charms.
- In CSS, I added a .page class with fixed height and width (DIN A4 paper size to be exact). By using media queries, I hide the pageControl header when printing and I add padding when viewing it on screen only (otherwise the padding will add up to the non-printable
areas and margins of the actual printer).
- Upon navigating to the print preview, a custom rendering function is called. This function will turn a set of custom data (the actual content) into a set of new DOM elements. It will then iterate through these elements, append them to a .page
div and check for content overflow each time (by comparing the parent element's scrollHeight / clientHeight and width respectively). If there is content overflow, the most recent element is removed from the .page, added back to the set of DOM elements and
a new .page div is created - so the next loop cycle will add that element to a new page.
- Finally, I count the occurences of div's with the .page class and update the innerText of all span.pages. This will result in "Page 2 of 3", for instance.
It's a little more excessive than I had hoped but still a lot less effort than generating a PDF programatically (which was sort of my "Plan B"). On the plus side, it's a super fast full-screen print preview which is also very customizable.
