Salesforce Lightning: How to generate PDF with charts and images

Generating PDFs in Salesforce with charts, images and textual content is one of the hardest tasks to achieve. I am sure you searched a lot for native solution but at this point we don’t have any native solution.


We had a requirement to generate PDF with charts, images, grid and textual content.

Data source for the charts and grids are from external API and PDF page size may vary from 25 to 50 pages.

Considering the requirement to generate PDF with a large number of pages, we initially searched for a server side apex solution, but it was clear to us after a lot of research that generating PDF with charts is not possible with Apex unless we use third party solutions (mostly paid).

After a lot of research we decided to settle with a client side solution using JS libraries.


VF Page

This is a simple implementation of the above architecture. On page load we are calling “loadPageData” action from “PDFGenCtrl” apex class.

We included 3 required Open Source library

Chartjs — JavaScript library to render charts

Dom-to-Image — To convert rendered html / DOM node into image

jsPDF — To create PDF and attach contents(image, text) into it.

Finally we have placeholders to include custom HTML & JavaScript.


There are 3 parts in the above html.

“Download PDF” button — To generate PDF and download.

There are two divs with “page” CSS class, these two divs will convert into two pages of the pdf with chart and image.


On page load, after apex action call we are parsing “pageData” to render a chart in first page and set image src in second page.

“downloadPDF” js function uses “dom-to-image” and “jsPDF” to generate PDF.


This is a simple Apex class to load page data from REST API and set the response to “pageData” property which can be used in the VF page.

Complete source code is available in github —

Full Stack Developer, Writer. Interested in Tech, Economics and Psychology