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");
Monday, September 14, 2009
Subscribe to:
Post Comments (Atom)
Hi..
ReplyDeletewhether 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
Hey..
ReplyDeleteThis 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.?