Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Printing particular HTML in Windows 8 JavaScript Application using Printing Contract

with 2 comments

Today I had a task to print a particular part of a Windows 8 JavaScript application page , The first thing I done is to download the MSDN printing sample form the internet . but the sample was talking about printing the whole page and that isn’t what I want , I just want to print a small piece of html.

First I noticed something that the print task  takes IPrintDocumentSource  as an source args which we get  from the current page document using MSApp.getHtmlPrintDocumentSource function.

Then I started to think why shouldn’t I make my own document and print it ?!!
I tried window.open() that return a document but it always return a Null in Windows 8.

After that I saw document.implementation.createDocument function in JavaScript which creates a new document , I tested it in Windows 8 and it is working perfectly

Finally I set the new document’s document element to the HTML I want to print.

Here is Code

function registerForPrintContract() {
        var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
        printManager.onprinttaskrequested = onPrintTaskRequested;

    function onPrintTaskRequested(printEvent) {
        var printTask = printEvent.request.createPrintTask("Ibraheem", function (args) {

            var windowContent = '<!DOCTYPE html>';
            windowContent += '<html>';
            windowContent += '<head><title>Ibraheem Printing HTML Sample</title></head>';
            windowContent += '<body>';
            windowContent += "<h1>Ibraheem's Windows 8 Javascript Printing HTML Sample</h1>";
            windowContent += '</body>';
            windowContent += '</html>';

            var doc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
            doc.documentElement.innerHTML = windowContent;

            var docsToPrint = MSApp.getHtmlPrintDocumentSource(doc);
            printTask.oncompleted = onPrintTaskCompleted;


    function onPrintTaskCompleted(printTaskCompletionEvent) {
        if (printTaskCompletionEvent.completion === Windows.Graphics.Printing.PrintTaskCompletion.failed) {
            WinJS.log && WinJS.log("Failed to print.", "sample", "error");

All what you should do is to call registerForPrintContract() at the page load function or at onactivated function and edit the windowContent variable html.

1)Create new Windows 8 JavaScript Application and add the code above and call registerForPrintContract() at onactivated function

2)Run the application and open Device from the charm bar to open the  printing contract


3) If you are connect to a printer select it or select Microsoft XPS Document Writer to create a .OXPS file to print it later


4)Now check the HTML we just created then click Print 🙂


5)The application will save the .OXPS file in my document and you can open it using any PDF Reader and also you can print it later 🙂

Here is a screen shot of the created OXPS file


It was really a nice experience if you have any comments please don’t hesitate to give me a comment


Ibraheem Osama Mohamed

Written by Ibraheem Osama Mohamed

July 7, 2013 at 9:18 pm

2 Responses

Subscribe to comments with RSS.

  1. Very cool stuff you have done. I appreciate your efforts. Thank you to share.

    Adam Wills

    July 8, 2013 at 9:17 am

    • hi

      is possible rewrite this code source in c# for use?



      dario basso cardoso

      August 12, 2015 at 12:12 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: