Generating PDF from client side with jsPDF

The topic of this article is to present to you jsPDF which is a javascript library for generating PDF from client side. The aim is to get a quick look on the main functions provided by the library and put them into pratice with a simple application. In order to get the display more user-friendly, Bootstrap CSS and JQuery will be used.

Explanations will be completed with code snippets and a link to a Github repository will be provided for testing a real example.

Here is the plan of this article:

• PART 1: A short presentation of jsPDF
• PART 2: A simple application
• PART 3: Handling PDF document in javascript
• PART 4: Preview of the PDF document
• PART 5: Getting a working example

PART 1: A short presentation of jsPDF

jsPDF is a javascript library for handling PDF documents developed by James Hall who currently works for Parallax. The source code of jsPDF library is available in Github. You can get a live demo on Parallax website and you can read the API documentation online here.

PART 2: A simple application

The pdfapp application allows the user to type a title and a text in two fields. Then the user is able to click a preview button to display the generated PDF in a section below.

PART 3: Handling PDF document in javascript

When you have retrieved the values of the two fields (title and text), you can create a new PDF document with the jsPDF object:

var doc = new jsPDF('p', 'mm', 'letter');

jsPDF object takes 3 parameters. The first parameter is the orientation (portrait 'p' or landscape 'l'). The second parameter is the unit for measurement when specifying some coordinates (pt, cm, in or mm as default). The third parameter is the format of the PDF document (a3, a4, letter, legal or a5 as default).

Then you can set the title in the PDF document. If the title is too long, it should be written on multiple lines:

var titleLines = doc.setFont('Courier','Bold')
  .setFontSize(20)
  .splitTextToSize(title, 160);
doc.text(50, 20, titleLines);

You can set the font with setFont which takes font name and font type as parameters. You can set the font size with setFontSize where the unit of the parameter is the one declared in the instantiation of jsPDF object.
The function splitTextToSize will split the text into lines according to the size provided as second parameter. The returned object is an array containing the lines. The unit of the size is the one declared in the instantiation of jsPDF object.
You can add some text to the document by using the function text on the jsPDF object.

Then you can set the content of the text exactly the same way as for title, by using the same functions and objects.

PART 4: Preview of the PDF document

When you have finished to edit the document, you are able to preview the document. In order to visualize the generated document we decided to use an iframe element and to transform the document as a data uri string.

var pdfOutput = doc.output('datauristring');
preview.src = pdfOutput;

When the document is generated as a data uri string, then this string is displayed in the iframe by setting it in the src property of the iframe.

PART 5: Getting a working example

You can find a working example in my github repository (the pdfapp folder).