How to print page numbers and have a large print preview?


  • I would like to give users the ability to print a report from my Windows 8 app. The print sample for HTML5/JS has been helpful so far, but now there's two things that it doesn't seem to cover:

    - How can I give the user a large (fullscreen) preview of the document to be printed?

    - How can I print the page number on each page (like "Page: 2 of 3")?

    Any thoughts or advise on this?

    Monday, April 22, 2013 11:59 AM


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

    • Marked as answer by Akinzekeel Wednesday, April 24, 2013 10:47 AM
    Wednesday, April 24, 2013 10:46 AM