Remove From My Forums

Printing on Split App (Javascript/HTML5)

Question

Hello,

I was trying to setup printing on the content of my split app. In my split app I have one side the lists and the other the content. I want to print out the content but instead every place I locate the print code, it prints out a back button and a scroll bar. How can I get it to print out the content? Please help. Thanks!

This is the code I am putting into the split.js located at /pages/split/split.js

var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
printManager.onprinttaskrequested = onPrintTaskRequested;
function onPrintTaskRequested(printEvent) {
    var printTask = printEvent.request.createPrintTask("Print Sample", function (args) {
        args.setSource(MSApp.getHtmlPrintDocumentSource(document));

        // Register the handler for print task completion event
        printTask.oncompleted = onPrintTaskCompleted;
    });
}

function onPrintTaskCompleted(printTaskCompletionEvent) {
    // Notify the user about the failure
    if (printTaskCompletionEvent.completion === Windows.Graphics.Printing.PrintTaskCompletion.failed) {
        WinJS.log && WinJS.log("Failed to print.", "sample", "error");
    }
}

Saturday, January 26, 2013 1:44 AM

Answers

0

Sign in to vote
There are a couple of approaches you can take here. The thing that you're dealing with is that MSApp.getHtmlPrintDocumentSource must be like the document variable--it can't be any arbitrary DOM element, unfortunately.

One approach is to use a print media query in your CSS to set display:none on anything you don't want printed, as well as rearrange anything you want. If you just have a div with the print content, then you can just set display:none on everything else.

To do this in a media query in your usual CSS, use:

@media print { /* Print-only styles */ }

Or you can put the styles in a separate stylesheet and conditionally load it in your HTML as follows:

<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />

Here are some other options:

In the document.body.onbeforeprint event handler, append additional child elements to the document and use the document.body.onafterprint event to remove them (the structure of such handlers is shown in Scenario 2 of the Print sample). If your print CSS leaves only those newly added elements visible, that’s all that gets printed. This very effectively controls the entire print output, such as adding additional headers and footers that aren’t visible in the app. You might have a place in the app, in fact, where the user can configure those headers and footers.
Call document.createDocumentFragment to obtain a document fragment and then populate it with whatever elements you want to print. getHtmlPrintDocumentSource accepts such a fragment.
If you want to print the contents of an altogether different HTML page, create a link element in the document head that points to that other page for print media. This will redirect getHtmlPrintDocumentSource to process that page’s content instead. Scenario 4 of the Print sample shows how to do this.

.Kraig

The above is taken from Chapter 15 of my book, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press, in the section entitled "Print Document Sources."
- Marked as answer by Song Tian Monday, February 4, 2013 2:24 AM
Saturday, January 26, 2013 2:26 AM

Answered by:

Printing on Split App (Javascript/HTML5)

Question

Answers