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”/>

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

<h:outputScript name="js/pdfmake/pdfmake.min.js" />
<h:outputScript name="js/pdfmake/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

<script>
   function exportChartInPDF() {
      var docDefinition = {
         content: [
				
	     ]
      }
      pdfMake.createPdf(docDefinition).open();
      pdfMake.createPdf(docDefinition).download('primefaces-charts.pdf');
   }
</script>

Call that function from a commandLink/commandButton

<p:commandLink onclick="exportChartInPDF()">
   Export Chart To PDF
</p:commandLink>

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:

<script>
   function exportChartInPDF() {
      var docDefinition = {
         content: [
	   'Line Chart',
	   {
	      image: $(PF('lineWV').exportAsImage()).attr('src'),
	      width: 520
	   }		
	 ]
      }
      pdfMake.createPdf(docDefinition).open();
      pdfMake.createPdf(docDefinition).download('primefaces-charts.pdf');
   }
</script>

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.