Printing ListView items received from a JSON data source in a Windows 8 application (HTML + JS)

Question

I have a Windows 8 application built using HTML and JavaScript. It has a ListView showing a dynamic list of places created from a JSON data source.

I use Print contract code from a sample MSDN (which shows how to print a page with static content) to implement the printing functions of this application. When printed, only half of the list is displayed in the ListView.

How to print a complete list from a ListView and make it spread over several pages with large content?

Answer 1

The trick here is to provide an MSApp.getHtmlPrintDocumentSource method document that correctly displays what you want to print, which is optional as shown on the page.

The sample you reference simply passes the current document object to getHtmlPrintDocumentSource and is the easiest way to print, but as you may notice, it may not give you the exact results you need.

An easy way to customize the output, as described in Chapter 15 by Kraig Brockschmidt, the excellent (and free) book on HTML and JavaScript applications in the Windows Store , is to add a media query for the type of print medium and use CSS to change the page output, for example:

@media print { .win-backbutton { display: none; } .watermark { display: none; } .titlearea { font-size: xx-large; } } 

However, this will not solve the problem you are facing. In your case, what is likely to work best is to create a separate page that provides output more convenient for printing. A.

As an example, based on scenario 4 in the example of a print contract, if I put an HTML page called print.html in the root of my application, I can link to it using the following code (note ms-appx: /// scheme that relates to content in my application package):

 // set the alternate content var alternateLink = document.createElement("link"); alternateLink.setAttribute("id", "alternateContent"); alternateLink.setAttribute("rel", "alternate"); alternateLink.setAttribute("href", "ms-appx:///print.html"); alternateLink.setAttribute("media", "print"); document.getElementsByTagName("head")[0].appendChild(alternateLink); 

Now that the device spell is triggered, my alternate content page comes as a print source, not the current page. You can use your alternate page to load content from a JSON source and render it in a printable form, which may differ from how the content is displayed on the page.

For more information on developing applications for the Windows Store, register with the Generation App .