How to Generate a PDF from your Visualforce Pages: Going Beyond ‘renderAs’

As a Salesforce developer, your customer might often need you to convert his Visualforce page into a PDF format. That is simple enough, right? All you need to do is to use the “renderAs” attribute on the Visualforce page and you are done! Hold on! There’s more to this than what meets the eye.

Imagine you have a similar requirement but instead, this time with a page using Lightning tools which, on one hand will save you from archaic UI, enabling you to use lots of great charting options for that perfect GUI that your client craves for, but taking away the ease of generating a PDF from the same page with a simple usage of “renderAs”. What will you do now?

In this blog post, I will take you through a simple workaround to ease your problems using jQuery library of jsPDF. I have used jsPDF, keeping all the graphs and tables inside the <div></div> tag which was later on converted into a base64 image using canvas library and then re-writing the same content in the pdf output.

Given below are the steps to follow so as to enable creation of pdf even with complex pages.

1. Download the following jQuery files and upload them as static resources within Salesforce. Add them to your Visualforce page as well
   
2. Cover your design portion (the portion that is complex with graphical charts and long tables) within div-tag
   
3. Add the code given below in your apex class. The function getImgUrl enables you to generate a base64 image URL of the div portion (from step 2)
   
4. The code snippet given below will add your base64 encoded image URL into your pdf file
   

Once you execute this code, your PDF will contain the graph and table that you wanted to include within it. Your problem ends here.

Does it?

There is still a critical scenario that can ruin all the hard work that you did above. What if the size of the image is more than the size of the PDF? Wouldn’t this approach cause the image to break and not be displayed properly in the PDF format?

Don’t worry! All is not lost.

In order to work around the above scenario, you need to know the height of your generated image. To get this, you need to convert your image into a base64 string. Now set the minimum height of your pdf page (in my example, I am setting it to 1760, normally approximated to its standard size).

Now you have the height of your pdf as well as the image. Divide the image height with that of your pdf height and the ratio you get will give you the number of pages that your content (in the form of image) intends to span across the psf. Now you need to iterate over the no. of pages and keep adding the image into your pdf. The code below will help you achieve the same.

For more details on how this works, check out this link https://pdf-generate-developer-edition.ap2.force.com/

Happy Coding..!!!

Reference Link: https://parall.ax/products/jspdf 





Written by Siddhraj Atodaria, Salesforce Developer at Eternus Solutions