Export Vaadin page to PDF

Vaadin 6 / 7 / 8
1

I need to be able to export some vaadin pages to PDF.

At this moment, I am able to export graph using Phantomjs but unable to do other components.
Phantomjs seems to have problems with GWT code.

Does someone has success to export complete vaadin pages to PDF using Phantomjs or other solutions ?
Thanks again for the help.

2

Hi,

I made a quick test with PhantomJS, with the rasterize.js script. It seemed to work OK with PNG output, but not PDF. I’m not so familiar with PhantomJS, so don’t know what is the problem.

Note: When using rasterize.js, I needed to modify it to have 5000 ms timeout so that the page can finish rendering. Instead of using a fixed timeout, you could implement some waiting logic, similar to that in the waitfor.js example. If using PhantonJS with Vaadin TestBench (WebDriver), it can wait for the page rendering to finish with “waitForVaadin” support.

You could also get a static HTML snapshot by sending the innerHTML of the page in a JavaScript callback to the server, and then render that to PDF with PhantomJS. Sending the innerHTML goes something like this example:

// Handle dump content from server-side
Page.getCurrent().getJavaScript().addFunction("dumpcontent",
    new JavaScriptFunction() {
    @Override
    public void call(JSONArray arguments)
            throws JSONException {
        // Do something with the dump
        // Note that the dumped HTML contains the Vaadin Client Engine loading code, which
        // must be stripped out if you want to view a dump in a browser!
        ...doSomething...(arguments.getString(0));
    }
});
       
// Button for dumping the content
Button takeadump = new Button("Take a Dump");
takeadump.addClickListener(new ClickListener() {
    @Override
    public void buttonClick(ClickEvent event) {
        Page.getCurrent().getJavaScript().execute(
            "dumpcontent(document.documentElement.innerHTML)");
    }
});
layout.addComponent(takeadump);

If you want to generate PDFs for printing and such, I recommend using a proper PDF generator. Vaadin UI components have all sorts of elements that are for user interaction, such as scrollbars, and may look silly in printouts. The styling of many components also has raster images, which doesn’t look so good on printouts.

3

Any solution regarding vaadin page (with tables, charts …) to PDF ?

4

Build a Report (e.g. Jasper) for your print action.

In my App I created reports for important things.

5

That not a solution, report shold be looks like web page (same design like print page on browser), that not possible or very hard to archive with jasper/birt …

Any other solution?

6

Is the way maxime and marko are describing on top not an option? (never did anything with phantomJs myself…)
Other then that i can only image 2 ways right now off the top of my head:

  1. Build your PDF using a pdf library, e.g. iText though this would not really look like a Vaadin page but more like a normal Pdf
  2. Make a Screenshot of your Vaadin page using one of the Vaadin Screenshot add-ons and then export it as a pdf. This though is quite dirty and probably will cause a few bugs on the way.

I would recommend using a pdf library which was meant to be used to create pdf. Then you have to see how good you can replicate your desired output with it.

7

There are several sites that offer HTML to PDF online conversion. If you do not want to pay for the service, try runpdf.com.