Export PrimeFaces Charts to PDF

export-pdf-primefaces

PrimeFaces Charts are based on JqPlot Charts which provides an easy way to export the canvas chart into an image.

In this small tutorial we will export PrimeFaces provided charts to PDF using pdfmake.js.

Contents

  1. Export Chart into an Image
  2. Including and setting up pdfmake.js
  3. Include Chart image in pdfmake document

1- Export Chart into an Image

Before diving into the setup and the export of the chart to our PDF document, let me explain the needed calls.

As mentioned in the PrimeFaces showcase, Charts are canvas based and can be exported as static images with client side api.

Assuming you have the following chart defined:

<p:chart type="line" model="#{mainBean.lineModel1}" widgetVar="lineWV"/>

chart-example

In order to obtain an image from the chart canvas, you may call a javascript function defined in the Chart widget:

PF('lineWV').exportAsImage()

Executing the above line in chrome console, or firefox firebug you can notice that it will return an image:

<img src="data:image/png;base64,iVBOR......" />

The returned image src is a data URI describing that image, we will use it later to add it to our PDF document.

2- Including and setting up pdfmake.js

To create and download the PDF we will be using pdfmake.js, a client-side javascript library, the final result will be a PDF file created in the browser, no need for server-side handling.

Browser support

IE 10 and above, Chrome, Firefox, Safari, Edge.

Including pdfmake.js in your page

To begin you should download and include these two files:

  • pdfmake.min.js
  • vfs_fonts.js

They can be found in the build folder of the downloaded zip file.

Setting up pdfmake.js

Create a js function, let’s call it exportChartInPDF

Call that function from a commandLink/commandButton

If everything is configured fine, clicking that button you should have a black PDF file downloaded.

3- Include Chart image in pdfmake document

In order to add the chart image exported before into the PDF, you should edit the document-definition-object, in our case it’s called docDefinition , more precisely the content  part.

Let’s revisit the exportChartInPDF()  function with the chart image added to that document-definition-object:

The first highlighted line is just a text being added to the PDF, a title for the chart let’s say, the rest are the image definition, as you notice line 8 contains the call for the exportation of the canvas image we discussed in the first section of this tutorial.

Clicking the button, you will notice that the Chart is included in the PDF which achieve the goal of this tutorial.

An example of the generated PDF.


Conclusion

While most of the requirements for charts pages are the ability to export those into a PDF,  pdfmake.js can be a lightweight library for generating charts in the browser, the final PDF document can be customized to a complicated structure and layout.

You can find an online demo of the final result.
Also you can Fork or Download the project on Github.

github_login_icon

If you think something is wrong please feel free to comment :)
  1. Peter Magsam says:

    hello,

    the export works fine but in the google chrome browser . i use Version 59.0.3071.115 (Offizieller Build) (64-Bit). the log

    [0706/125122.982:ERROR:process_info.cc(631)] range at 0x2219360e00000000, size 0x1cd fully unreadable
    [0706/125122.982:ERROR:process_info.cc(631)] range at 0x2219367400000000, size 0x1cd fully unreadable
    [0706/125122.982:ERROR:process_info.cc(631)] range at 0x0, size 0x1cd fully unreadable
    [0706/125444.760:ERROR:process_info.cc(631)] range at 0xcd5f360e00000000, size 0x15f fully unreadable
    [0706/125444.760:ERROR:process_info.cc(631)] range at 0xcd5f367400000000, size 0x15f fully unreadable
    [0706/125444.760:ERROR:process_info.cc(631)] range at 0x0, size 0x15f fully unreadable
    [0706/130705.014:ERROR:process_info.cc(631)] range at 0xe3df360e00000000, size 0x214 fully unreadable
    [0706/130705.028:ERROR:process_info.cc(631)] range at 0xe3df367400000000, size 0x214 fully unreadable
    [0706/130705.028:ERROR:process_info.cc(631)] range at 0x0, size 0x214 fully unreadable
    [0706/134207.521:ERROR:process_info.cc(631)] range at 0x5a01360e00000000, size 0x277 fully unreadable
    [0706/134207.543:ERROR:process_info.cc(631)] range at 0x5a01367400000000, size 0x277 fully unreadable
    [0706/134207.543:ERROR:process_info.cc(631)] range at 0x0, size 0x277 fully unreadable

    may be you have an idea.

    regards from Bavaria

    Peter

    Reply