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.
So, whats the advantaces and disadvantages of these two approaches?
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.
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)
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.
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:
- 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 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.
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.
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!
Uncompilcated generation and definition, not much code to write?
|Good support of different browsers|
Are there any problems with old browsers?
Can the PDF be opened, downloaded or directly printed?
How extensive are the options to style the content?
How extensive are the options to layout the content?
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.