Adding print feature to a GWT app

Enable print: I was able to add print feature to a GWT app by using gwt-print-it library. I used last example in the documentation to get the printing to work (see included code fragment below).

Print.it(“<!DOCTYPE HTML PUBLIC ‘-//W3C//DTD HTML 4.01//EN’ ‘http://www.w3.org/TR/html4/strict.dtd’>&#8221;, “<link rel=StyleSheet type=text/css media=paper href=/paperStyle.css>”, RootPanel.get(“myId”));

I had to use absolute URLs instead of relative paths for CSS href attributes. Although this library can potentially help me to eliminate the need to create a separate print friendly display code, this created several challenges:

CSS link difference: After attempted to print using several browsers, I discovered that different browsers will interpret href attribute for the CSS links differently. To avoid the need to create browser specific code, I tried the following workaround:

Element body = RootPanel.getBodyElement();
Print.it((Element) body.getParentElement());

This will print the whole page, which includes all the CSS references that are already working for the browsers and eliminate the need to define separate CSS links that does not work across browsers.  🙂

Image link difference: I also discovered that the image links are also broken when attempt to print. This is a known “feature” according to gwt-print-it documentation. So, instead of defining images using <img> tags, I used background-image definition in my CSS file and use a div tag with an ID to associate with the CSS definition. See answer #7 in this page for code example. This effectively unified how browsers reference images, which always relative from where CSS file is located. This means I no longer need to create print specific URLs for images. 🙂

Background image printing: Once I started to use background images, Chrome stopped printing the images. A search on Internet led me to this solution, which worked great. 🙂 For Mozilla, users can enable printing of background images by select Options tab in the Print window and check “Print Background Images”.

Advertisements

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