There are 2 ways of rendering PDFs for your website or application. The first way is the server-side rendering, which is probably the most well known in the web development world. There are a lot of articles how to implement it and which library to use, that’s why we skip it and focus on a new way, the client-side rendering which starts being popular with the advancement of HTML5.

Why Should You Prefer the Client-side Rendering

There is a couple of reasons. Firstly, you can save server’s CPU resources, so they can be used for something more valuable. Secondly, you don’t need to worry where to store thousands of generated PDFs as well as cleaning up the old ones.

Libraries

Thanks to the open source community, there are a lot of good libraries to solve this problem. In this post I will highlight two the most promising ones: jsPDF and PDFMake.

1. jsPDF

Live Playground

jsPDF is a client-side solution for generating PDFs, used for event tickets, reports, certificates. It provides an imperative way to create PDF files. In order to generate something you need to create jsPDF object and call its methods precisely defining what and how to render, for example:

var doc = new jsPDF();

doc.setTextColor(100); // set the color
doc.text(20, 20, 'This is gray.'); // x = 20, y = 20, render This is gray

doc.setTextColor(150); // set the next color
doc.text(20, 30, 'This is light gray.'); // render by other coordinates

jsPDF doesn’t have any layouting API, so you need to specify x,y coordinates where you want to render things. This library is very small (66KB) comparing to its competitor and allows you to split pdf into pages, attach images, draw primitive graphics objects or even render PDF from simple DOM element. Unfortunately, it doesn’t provide you an API to render tables, but it seems that this problem could be simply solved with a plugin.

2. PDFMake

Live Playground

PDFMake is quite big(410KB) compared to jsPDF and it’s a very serious tool with a powerful set of cool features, for instance: columns, tables, (non-)ordered lists, headers, footers, background-layer and many more. Check out their full API description here. It uses JSON to describe your PDF document, which allows you to focus on what you want to render and let pdfmake decide how. Here is a simple example of what it can look like:

var docDefinition = {
  content: [
    'Check out our nice column example:\n', // first this line
    {
      alignment: 'justify', // then two justified columns of text
      columns: [
        {
          text: 'Some cool text for first column goes here.'
        },
        {
          text: 'Some cool text for second column goes here.'
        }
      ]
    }
  ]
};

Conclusion

After trying out both of the libraries I can conclude that both libraries are really good and both were able to render documents required for my project, but eventually I chose jsPDF, because the size matters :)

(Editor’s Note: pdfmake also works in nodejs. So if you need more powerful features you can use it on the server)

Thank you for reading. I hope this post helps you to make right decision about where to render PDF documents and which library to use.