Introduction
In this article, we’ll talk about a series of Javascript libraries for
generating PDFs.
We'll look into real-world use case...
For further actions, you may consider blocking this person and/or reporting abuse
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
Indeed, Puppeteer is one of the easiest ways to create PDFs.
However, it can be difficult to use in some use cases.
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
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.
@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.
If there is a scrollable div container with content, can it the whole scrollable area rather than visible part of div?
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.
Can I use it in Angular rather than react?
Thanks for this comment, it looks awesome. I'll replace pdfme in favor react-pdf.
pdfme looks really cool, will definitely try it.
⭐PDFMe⭐ looks promising. Let me try in my upcoming project.
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.
Good article. Check out the client-side pdf generator github.com/ovvn/dom-to-pdf which makes a printable paginated pdf from DOM.
Cool ! I will need that.
Any of the above deals with CMYK PDF output? Thanks
You can also try my own wrapper over puppeteer
github.com/AmirTugi/tea-school
I aimed to make the usage of puppeteer easy.
Thanks for sharing this informative post.
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?
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?
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.
Your missing hummus library.
I was trying to work with labelmake on react, but I have some trouble and the documentation is poor.
Thanks for sharing.
anyone know library run in client-side that have: html-to-pdf without using canvas (html2canvas) ? html2canvas is frezzeUI every time it generate canvas
Could you please share any working example of pdfme with ReactJs?
Please check this!
codesandbox.io/embed/github/pdfme/...
Sorry did i miss the section on PDF.js by Mozilla?
PDF.js is not generating PDF.
In pdf translation scenarios, pdfkit works great!
Useful for changing styling in the middle of a paragraph.
I'm okay with incomplete tutorial, I know some of you are busy guys. But come on PS buttons based evaluation score.
How many of these use headless browser? Puppeteer is resource intensive.
I want output like this.