PDF generation with JavaScript

A comparison of two libraries

Creating PDFs from webcontent is a common use case in the RIA (Rich Internet Application) world. For example you can create a download of a bill in a billing system or create an instance of a predefined template enriched with data from the webpage. If you need to create a PDF you have two choices:

  • Generate the PDF in the backend of your RIA application, for example in Java.
  • Generate the PDF in the frontend for example in plain Javascript, AngularJS or Angular2-5.

So, whats the advantaces and disadvantages of these two approaches?

Backend generation

The best argument for backend generation is the reusability of the code. Undependent from the UI, you can use the functionality in different User Interfaces. Other arguments are:

  • When a lot of data must be preprocessed before putting it into the PDF.
  • When the amount of data is huge, the backend has more power to process it, that the Browser.
  • When the data of the PDF is not sent to the frontend and is only present in the PDF.

A good example for a backend generated PDF is a statistical report with huge table of calculated values. It is not likely, that the data is not represented in the same preprocessed structure.

Frontend generation

In some cases it is better to create the PDF in the frontend. Arguments could be:

  • The PDF has only little information.
  • The data of the PDF was changed by the frontend and does not exist in the same structure in the backend.
  • The main focus of the PDF is the layout enriched with some data.

A good example for a frontend generated PDF are table cards for all guests of a birthday party. Only little data, with the focus on the layout of the PDF (spacing, and cutting lines)

So, when we decide to generate our PDF at the frontend side of our RIA application, and we have Javascript for this, which library would be the best to do so? We found two libraries, which are commonly used for this. The following will shortly introduce them and then make a comparison of both.

jsPDF (https://parall.ax/products/jspdf)

jsPDF is from parallax, a software company in england, which has focused on webdevelopment, design and marketing.

You can install jsPDF via the common ways of CDN, locally, yarn and npm.

To create a new PDF, you simply create a new instance, add some content and saves it. Via the save and download dialog is opened and provides you the document.

Simple PDF (from the documentation website)
1
2
3
4
5
// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()
doc.text('Hello world!', 10, 10)

There are additional parameters for the PDF instance like the orientation, the unit and the format. It is possible to define a custom font face and text colors. Several pages are no problem.

The following elements can be placed in the PDF:

  • Text
  • Image
  • Simple Shapes like lines, ellipses, rect…

The most significat characteristic of this library is, that the positioning of the elements works ONLY via the declaration of the top and left value. E.g. doc.text(‚Hello world!‘, 10, 10) positions the text 10 milimeters from the top and 10 milimeters from the left page border.

pdfmake (http://pdfmake.org)

pdfmake is a github project from Bartek Pampuch.

You can install pdfmake locally or via bower.

The generation of the PDF follows a declarative approach. This means you define a JSON Object with content and style information. Afterwards you pass it to a static function pdfmake.createPDF. You can choose if you want to open, download or print the document.

PDF Decaration 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var docDefinition = {
  content: [
    { text: 'This is a header', style: 'header' },
    'No styling here, this is a standard paragraph',
    { text: 'Another text', style: 'anotherStyle' },
    { text: 'Multiple styles applied', style: [ 'header''anotherStyle' ] }
  ],
  styles: {
    header: {
      fontSize: 22,
      bold: true
    },
    anotherStyle: {
      italic: true,
      alignment: 'right'
    }
  }
};

The best features of this approach are the different possibilities to layout the content.

You can define css styles, columns, tables, header and footer and have a lot of other styling options. The positioning of images is also possible, even scaling and cropping of them.

Comparison of the libraries

The following table gives a short overview about the specific advantages and disadvantages of the two libraries. In summary one can say, that jsPDF is good for simple content and if you want to have easy handling. In my option the limited download options is the biggest disadvantage, because in lot of applications you want to use the PDF to directly print webcontent in a specific style. With jsPDF you first have to download the content and then open and print it. pdfmake gives the option to directly print the document. (Daumen hoch)

If the layout and styling is in focus for the document I definitvely recommend pdfmake – but be carefully. It does not work for Safari less than version 10!

jsPDF
pdfmake
Easy handling

Uncompilcated generation and definition, not much code to write?

(grüner Stern)(grüner Stern)(grüner Stern)(grüner Stern)(grüner Stern)     (grüner Stern)(grüner Stern)(grüner Stern)
Good support of different browsers

Are there any problems with old browsers?

(grüner Stern)(grüner Stern)(grüner Stern)(grüner Stern)(grüner Stern)     (grüner Stern)(grüner Stern)(grüner Stern)
Download options

Can the PDF be opened, downloaded or directly printed?

         (grüner Stern) (grüner Stern)(grüner Stern)(grüner Stern)(grüner Stern)(grüner Stern)
Good styling

How extensive are the options to style the content?

    (grüner Stern)(grüner Stern)(grüner Stern) (grüner Stern)(grüner Stern)(grüner Stern)(grüner Stern)(grüner Stern)
Layout options

How extensive are the options to layout the content?

      (grüner Stern)(grüner Stern) (grüner Stern)(grüner Stern)(grüner Stern)(grüner Stern)(grüner Stern)

Support for Angular

For both of the libraries an implementation for Angular and AngularJS is available. So you can easily use PDF generation in your angular application.