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);
            args.setSource(docsToPrint);
            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

1

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

2

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

3

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

4

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

2056910448_thanks_xlarge

Ibraheem Osama Mohamed
@IbraheemOM

Advertisements

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?

      thanks

      Dario

      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: