DEV Community

Cover image for A full comparison of 6 JS libraries for generating PDFs

A full comparison of 6 JS libraries for generating PDFs

Kyohei Fukuda on March 15, 2021

Introduction In this article, we’ll talk about a series of Javascript libraries for generating PDFs. We'll look into real-world use case...
Collapse
 
rubenheymans profile image
Ruben •

Puppeteer is by far the easiest for me. You just create a page in your frontend framework with html5 /css and use puppeteer with headless chrome to create en exact pdf of that page. Very easy to do you could create a firebase app to use as backend

Collapse
 
handdot profile image
Kyohei Fukuda •

Indeed, Puppeteer is one of the easiest ways to create PDFs.
However, it can be difficult to use in some use cases.

Collapse
 
nikkhielseath profile image
Nikkhiel Seath •

I just had a question about this approach. Rendering a page on a Headless browser is a resource heavy task.
Were you able to get the desired performance? If yes, how many users was this "firebase app" serving and how many requests for generating a PDF was your backend handling?

Thank You
SNikhill

Collapse
 
rubenheymans profile image
Ruben • • Edited

I was able to get the desired performance but I'm using firebase so performance is never an issue. I don't have many users. Maybe firebase costs will rise fast if you have lot's of users/requests.

Collapse
 
aravin profile image
Aravind A •

@ruben, It may look like easy.

But you have to open a browser, wait for page to load and take the screenshot. It is a CPU intensive work.

You have to manage memory efficiently.

Collapse
 
zhshqzyc profile image
Hui Zhao •

If there is a scrollable div container with content, can it the whole scrollable area rather than visible part of div?

Collapse
 
brianmcbride profile image
Brian McBride •

An interesting library is this one too:
react-pdf.org/
It has pretty good ease of use if you are a front-end developer.

What is missing from so many PDF libs is the ability to load and modify existing PDFs. Like, I want to be able to load a PDF and stamp over it "PROCESSED". Well, maybe not that exact example. But at least take exiting PDFs, fill out their forms, add a layer of content, etc...

The signing of PDFs is also another tool. I get that really isn't PDF creation. But still, the e-signing libs can be a chore.

Collapse
 
zhshqzyc profile image
Hui Zhao •

Can I use it in Angular rather than react?

Collapse
 
dartess profile image
Kozlov Sergey •

Thanks for this comment, it looks awesome. I'll replace pdfme in favor react-pdf.

Collapse
 
benjamindasilva profile image
BenjaminDaSilva •

pdfme looks really cool, will definitely try it.

Collapse
 
aravin profile image
Aravind A •

⭐PDFMe⭐ looks promising. Let me try in my upcoming project.

Collapse
 
wizidot profile image
wizidot •

For me the best PDF generator is headless chrome... A litte bit tricky to use but very efficient. the problem is that this chrome functionality has not been maintained for a while... I will try labelmake to see if it well manage page breaks. Thanks.

Collapse
 
omazin profile image
Osman Mazinov •

Good article. Check out the client-side pdf generator github.com/ovvn/dom-to-pdf which makes a printable paginated pdf from DOM.

Collapse
 
souksyp profile image
Souk Syp. •

Cool ! I will need that.

Collapse
 
andrewdcato profile image
Andrew Cato •

My organization integrated pdf-lib into the stack during a few projects in the last year. We've yet to use it for anything client-side but it's been insanely easy to work with thus far.

Collapse
 
llccing profile image
现实很丰满 •

your article is wonderful and helpful.

do anyone know how to convert the excel to a PDF, should i make a table base on the excel, then convert the table to PDF, any else methods?

Collapse
 
robinterry profile image
Robin Terry •

Thanks for sharing this informative post.

Collapse
 
umair_saeed_3fdf97e48f67b profile image
Umair Saeed •

Hye, guys. I want to create pdf for my Dashboard items. Which library is good for this purpose?
I have tables and charts in my dashboard, and if I have 2 widgets in my row, I want to see them as they are.
Any suggestions, how can I create same layout in generating pdf?

Image description

Collapse
 
sagar profile image
Sagar •

Your missing hummus library.

Collapse
 
amirtugi profile image
Amir Tugendhaft • • Edited

You can also try my own wrapper over puppeteer
github.com/AmirTugi/tea-school
I aimed to make the usage of puppeteer easy.

Collapse
 
walkvanja profile image
walkvanja •

Any of the above deals with CMYK PDF output? Thanks

Collapse
 
devopshasan profile image
Hasan Habib •

Could you please share any working example of pdfme with ReactJs?

Collapse
 
handdot profile image
Kyohei Fukuda •
Collapse
 
nguyenthechinh profile image
NguyenTheChinh • • Edited

anyone know library run in client-side that have: html-to-pdf without using canvas (html2canvas) ? html2canvas is frezzeUI every time it generate canvas

Collapse
 
al_hilario profile image
Alvaro Hilario •

I was trying to work with labelmake on react, but I have some trouble and the documentation is poor.

Thanks for sharing.

Collapse
 
ricky11 profile image
Rishi U •

Sorry did i miss the section on PDF.js by Mozilla?

Collapse
 
handdot profile image
Kyohei Fukuda •

PDF.js is not generating PDF.

Collapse
 
luckymore profile image
不长肉 •

In pdf translation scenarios, pdfkit works great!

Useful for changing styling in the middle of a paragraph.

Collapse
 
paiatpeace profile image
Ameya Pai •

How many of these use headless browser? Puppeteer is resource intensive.

Collapse
 
noorwachid profile image
Noor Wachid •

I'm okay with incomplete tutorial, I know some of you are busy guys. But come on PS buttons based evaluation score.

Collapse
 
umair_saeed_3fdf97e48f67b profile image
Umair Saeed •

I want output like this.

Image description