jsPDF in Web Portal

What is jsPDF?

jsPDF is an open-source library for generating PDF documents using JavaScript. It provides multiple options to generate PDF files, with custom properties. It has numerous plugins to support various ways of PDF generation.

The Challenge in portal web application for PDF generation:

In portal, aggregation of data from various sources plays an important part. In such cases, generating PDF with different visibility rules specific to a particular user, requires client side solution. Also, the solution should facilitate to render the generated PDF in different ways – open in new window, open in same window, save the file by default with default name, save the file with user given name, print the generated file automatically etc.

A simple algorithm to do so completely at the client side may be

1. Capture the entire html page (may be body section / a particular section identified by an id attribute in the html) as an image.
2. Generate a blank PDF with required document properties.
3. As per the requirement, add the necessary top level content of the PDF document – date of PDF generation, an identifier, title to the document etc.
4. Add the image with necessary parameters into the PDF below the custom content added.
5. Render the PDF as per the requirement

JsPDF JavaScript library provides this solution through one of its plugin – addHTML plugin. Rendering the pdf in different ways also supported through other plugins of jsPDF.

AddHTML plugin from jsPDF, renders an HTML element to canvas object which is then added as an image to the PDF.

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

This plugin requires html2canvas (https://github.com/niklasvh/html2canvas) or rasterizeHTML (https://github.com/cburgmer/rasterizeHTML.js) to perform the image conversion.

Briefing the steps needed to implement this solution.

1. Download the latest version of jsPDF libraries. JsPDF.js minification version can also be used.
2. Add following plugins of jsPDF.
   • FileSaver.js – saveAs() FileSaver implementation
   • jspdf.plugin.addimage.js – Generate the image of web page (as per the defined DOM element) and add to pdf
   • jspdf.plugin.autoprint.js – Invoke the browser print option for the generated pdf
   • jspdf.plugin.cell.js – support html tables
   • jspdf.plugin.addhtml.js – Plugin to generate pdf from html elements
   • jspdf.plugin.split_text_to_size.js – To add text with appropriate size in pdf
   • jspdf.plugin.standard_fonts_metrics.js – support for standard font used in pdf
3. Add below js libraries
   • html2canvas.js – supports to take screenshot image of the webpage (rasterizeHTML.js can also be used alternatively)
   • Blob.js – blob implementation
   • Png.js – to support png image
   • Zlib.js and deflate.js – for compression and de-compression
4. Create a new jsPDF document object

                       var doc = new jsPDF();          

5. Set the options to the jsPDF document object. Following options can be set – dim, format, pagesplit, rstz(if using rarterizeHTML), width

                       var options = {

                       pagesplit: true

                       };

6. To add text before the webpage screenshot content in pdf, for example, below lines of code adds current day and date at top right corner of the pdf document

                       doc.setFontSize(14);

                       doc.text(getDayAndDate(),200,10,"right");

7. Call addHTML plugin to place the webpage screenshot on the pdf document. The call back function can be used to render the pdf document as desired. Different ways of rendering the pdf is discussed in next section.

                                                 doc.addHTML(document.body,options, function() {

                                                         var string = doc.output(‘datauristring’);

                                                         $(‘#attachment’).val(string);                           

                                                 });

Different ways to render a pdf generated from jsPDF

JsPDF document object supports multiple types for rendering the pdf document. Different ways that are commonly used include

1. Download the generated pdf file

                      doc.save(“<filename>”);

2. Print the generated pdf file using browser print option

                      doc.autoPrint();

3. Open the generated pdf in new window

                      doc.output(“ dataurlnewwindow”); 

4. Open the pdf in current window

                      doc.output(“ dataurl”);

5. Render as a dataURI string , to send to server to facilitate attachments

                      doc.output('datauristring');

Problems faced while implementing this solution

1. Not supporting IE 10 and below.

Reason: atob function is not supported in IE less than version 10.

Mitigation: Replace “atob” function to “window.atob” in jspdf.plugin.addimage.js

2. Adding text and screenshot to the generated pdf, current implementation of the addHTML plugin doesn’t support this.

Mitigation: In order to add the text above the webpage screenshot, adjust the value of variable ‘cy’ in addHTML plugin [jspdf.plugin.addhtml.js]. This variable helps to push the screenshot image down the pdf page, enabling not to override the text added to the page.