Monday, September 14, 2009

GWT Printing

In my GWT application I was asked to write printing functionality, to print a pop-over content. I searched a lot on a web, I got a reference where I found a code that prints a content of DIV or specified HTML element. The target I wanna to print was a pop-over with CSS. I tried code but print I was getting without CSS, scattered UI. With the following code you can print any GWT widget or doc with CSS. If you print a html page with following line
< link rel="StyleSheet" type="text/css" media="print" href="/myCss.css" >

browser apply its own CSS to the printing document.

Print.java

import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DeferredCommand;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.UIObject;

public class Print {

public static native void it() /*-{
$wnd.print();
}-*/;

public static native void buildFrame(String html) /*-{
var frame = $doc.getElementById('__printingFrame');
if (!frame) {
$wnd.alert("Error: Can't find printing frame.");
return;
}
frame = frame.contentWindow;
var doc = frame.document;
doc.open();
doc.write(html);
doc.close();
frame.focus();
frame.print();
}-*/;

public static native void printFrame() /*-{
var frame = $doc.getElementById('__printingFrame');
frame = frame.contentWindow;
frame.focus();
frame.print();
}-*/;

public static class PrintFrame implements Command {

public void execute() {
printFrame();
}
}
public static PrintFrame printFrameCommmand = new PrintFrame();

public static void it(String html) {
try {
buildFrame(html);
} catch (Throwable exc) {
Window.alert(exc.getMessage());
}
}

public static void it(UIObject obj) {
it("", obj.getElement().getInnerHTML());
}

public static void it(Element element) {
it("", element.getInnerHTML());
}

public static void it(String style, String it) {
it("" + style + "" + it + "");
}

public static void it(String style, UIObject obj) {
it(style, obj.getElement().getInnerHTML());
}

public static void it(String style, Element element) {
it(style, element.getInnerHTML());
}
}

You have to insert following line of code into your GWT application's html file :
< iframe id="__printingFrame" style="width:0;height:0;border:0"> </iframe>

So you can set a ID to a GWT element and pass it to print method. To print a element content with css you can call

Print.it("",DOM.getElementById("html_id"));

You can set Id to any widget in GWT easily e.g. if you to set Id to panel
panelObject.getElement().setId("html_id");

2 comments:

  1. Hi..
    whether it will work for printing an image in a panel?

    I tried with the code but it is not working for the image

    pls reply..

    Thanks in advance

    ReplyDelete
  2. Hey..
    This post seems to be quite old.
    I was trying the same thing, was wondering what is myCss.css you mentioned in < link rel="StyleSheet" type="text/css" media="print" href="/myCss.css" >
    is it the CssResource you create in GWT?
    and I suppose I need to pass this code in Print.it() as first arg.?

    ReplyDelete