Client-side PDF Generation: If you struggled with dynamic content positioning in jsPdf

Brahma Putra
2 min readApr 20, 2020

At first, I was using jsPdf to generate Report data as a part of the application. It’s very popular and well documented, but when I came across the needs of the dynamic content, I found it not as simple as I thought.

The case is every element on jsPdf is needed to set its x and y position on the page. So, to add the next element below it, we need to specify current y to be greater than the y on the previous element. The problem is, we never know the length of the element. It causes the height of an element may vary, and I can’t find the proper way to calculate the height of the dynamic text.

After spending hours on the surf, I concluded the best solution for that kind of problem is to change the tools, my favorite one is pdfMake. I have tried to make this layout with it:

All contained data are not representative (dummy).
All contained data are not representative (dummy).

Here are 5 Reasons why you need to use pdfMake:

1. Auto-positioning without the hassle

With pdfMake, you don’t need to set x and y to every element. The positioning will follow the document structure and it has some useful features to utilize, e.g. margin, alignment, etc. It’s also documented well here.

2. Supports the <svg> Element

If you need any simple graphic for your document, I recommend you to use HTML SVG features instead of creating graphic externally.

coming soon

--

--

Brahma Putra

GIS Front-End Developer & Computer Scientist based in Bandung, Indonesia