📑 What do you use to generate PDFs?
Our dev shop has had a few clients add PDF exports to requirements—for invoices, receipts, and reports mainly.
Every time, it's been a pain in the ass to get going. Here's what we've done:
First approach: HTML + wkhtmltopdf (or puppeteer)
It's gross but it works (sort of). The gist is to generate dynamic HTML, serve it, and then render a PDF from the HTML.
This requires a webserver to spit out the server-side rendered HTML, hand-coded templates, and a way of accessing the dynamic data before it's called to render.
Here we’re using a browser engine to generate HTML and then exporting a PDF. Pretty hacky.
Second approach: React-PDF
A better approach that still has issues. Instead of using a browser for rendering, this uses Facebook's Yoga engine.
Where this really shines is being able to use flexbox. Because we're sending dynamic data, it is expected that things might wrap and change. Flexbox provides a much better way to handle layout shifts.
But with this setup, you still have to:
- Use Nodejs
- Be familiar w/ React and yoga’s implementation of flexbox
- Set up an endpoint that runs react-pdf
- Maintain the react pdf templates; changes require redeploying the backend
There’s a bit of initial config and ongoing maintenance.
We haven't tried a setup that renders using x, y coordinates.
But that would seem to come with its own set of issues as it relates to tables, dynamic data, and keeping everything aligned as intended.
Anyone found a better approach?
Been a couple of years since I've looked at this, but here are a few more ideas (not recs since I haven't tested them in a while):
Let me know what you end up landing on, curious!
Great recommendations. Something like API Template is exactly the type of approach we thought could make the process easier.
Hi Rion, I'm afraid I have to disagree with the "gross" comments on your first approach :)
Puppeteer and the page.pdf() method works great for me! The only thing you have to watch out for is making sure images, fonts etc are all loaded before you attempt to render. You can even use print stylesheets for greater control over the look and feel.
Is there something you don't like about this process? Maybe I can give some tips from my experience - I use this tech extensively in my product.
I agree, it's a bit clunky to have to update HTML templates when you want to change the look and feel of the PDF. In fact I built Bannerbear.com for this purpose (it has a template editor so you don't have to mess around with HTML templates) - more so for doing dynamic images, but I also do dynamic PDFs.
Echoing what Aaron (@sancty) said, BannerBear looks awesome. Completely missed that it supports PDFs the first time I checked it out.
Hi there! Just wanted to say I'm one of the partners at the dev shop and largely responsible for why we're exploring better ways to generate PDFs. I've had success with headless browsers systems like puppeteer, but the export to pdf functionality always felt like an after thought. Additionally, setting this up as part of bigger API or standalone process is tedious and requires some maintenance... especially if you have to redeploy every time your underlying template changes.
After doing a number of PDF exports for clients, we finally got tired of redoing the same things and started looking for a plug and play solution. Our goal is make it easy dynamic PDFs like reports, invoices, pitch decks, proposals, e-tickets, transaction ledgers, and more. These are the challenges we faced in the past when providing our clients with PDF exports to meet their end user's needs.
Btw, I've been seeing Banner Bear popup quite a bit lately! You guys are really doing some great stuff. Would love to talk shop / tech if you ever open to that.
you may want to revisit puppeteer if you haven't recently.
I think the pdf functionality is more mature now - in the beginning it was a bit more scrappy I think, but now the PDF api is pretty much as full-featured as the screenshot api.
https://pptr.dev/#?product=Puppeteer&version=v10.4.0&show=api-pagepdfoptions
Yeah definitely looks like they've updated it since the last time I played with it. Thanks for the heads up!
Hi @rionmartin (& thanks @gimelgabriel for mentioning our product)
I'm the founder of APITemplate.io and CraftMyPDF. I feel you, it's a pain in the ass to generate PDFs.
The followings are a few issues with Puppeteer and HTML to PDF solution.
(1) Puppeteer doesn't render external resources(fonts, images) in the headers/footers. We end up parsing the header/footer html and embedding the external images in base64 for our customers.
(2) It's not intuitive to work with HTML. In our product, we incorporate a live preview to instantly preview the layout with a side-by-side preview panel.
(3) it's not easy for a small team to build a solution to handle concurrent PDF generation.
That's why we turn it into a product to help developers to reduce the development time/cost.
However, there is a niche - no-code/power users that prefer a more visual way to create PDF documents.
We also built a drag-and-drop product CraftMyPDF for PDF generation(just like our APITemplate's image editor! but with a header/footer and paging). It's designed for people with less technical skills(HTML, Javascript & CSS). It resembles CrystalReports and it is web-based(Yeah, I was a heavy user of CrystalReports). We also have a white-label editor solution for companies that want to let their users edit the PDF templates.
I have developed an HTML to PDF web service for my clients and I sue the first approach that you have mentioned. Instead of puppeteer I am using playwright with Python. It works perfectly fine for me and I use method this for screenshots and pdf generation.
Previously I tried other ways to do it including wkhtmltopdf and selenium.
A friend of mine built jsPDF maybe you should check that out.
Jotform's Smart PDF forms might do the trick. It won't be as flexible as the HTML method but you can make it work. It's designed to convert online forms into fillable PDFs but it also could be used as a PDF generator. Instead of using HTML as your main template you'll be using a form which is way easier to customize, and you'll be generating a PDF version automatically.