I'm currently working on generating dynamic PDF reports in a production app, and I'm facing some challenges with my approach. I've tried using DocxTemplater, but it became difficult to maintain due to a poor template authoring experience with dynamic structures, making it feel fragile and slow in performance. Then, I switched to Handlebars with Puppeteer (HTML to PDF) for more flexibility. However, I'm encountering real-world issues like content getting cut off across pages, dynamic data causing overflow, and unpredictable table layouts in the PDFs.
Right now, I'm caught between two approaches: using Docx for a stable layout, which isn't great for dynamic content, versus HTML/Puppeteer for flexibility but with layout control struggles.
What I'm looking for is a way to create fully dynamic, data-driven reports that have predictable layouts (without those annoying cutoffs and overflow issues), fast generation speeds for user-facing interactions, and a maintainable template system for scaling over time.
The context is that I'm using a tech stack with React, NestJS, and TypeScript for a multi-tenant product where different customers need various report templates. The reports have variable-length data, conditional sections, and large tables.
So my main questions are: 1) What methods are you using in production for issues like these? 2) How do you effectively manage large dynamic tables and pagination? 3) Are there better alternatives or approaches that you can recommend?
4 Answers
I've been in a similar situation with multi-tenant apps. We found success by using pdfmake for structured layouts combined with React components as templates. Here’s how we did it: first, use React components for any dynamic sections (like tables and charts) and then export them to JSON with `ReactDOMServer.renderToString()`. Afterward, you can use pdfmake to convert this JSON to PDF; it offers great control over pagination and complex tables. For larger datasets, pre-render critical sections in the browser before injecting them into the PDF—it really helps with stability. Just a heads up, pdfmake has a bit of a learning curve, but it's worth it in the long run. We also pre-calculate table row heights in JS to handle overflow issues. While Puppeteer is solid for simpler cases, a dedicated PDF engine can really make a difference for complex reports.
Have you considered exploring jsPDF for your needs? It might be worth a shot if you need something lightweight and easy to implement for quick reports.
I actually tackled a similar problem with a side project I haven't released yet. I designed a system that uses a service to turn AI-generated HTML into PDFs by running Chromium in a cloud function. It handles page breaks directly in the HTML, and generation is really quick—takes just seconds. I haven't had major issues with tables, but it might depend on the complexity you're facing.
It sounds like your layout issues might have to do with CSS media queries. For instance, using CSS properties like `page-break-after: always;` can help manage tables across pages without cuts. Check out the updated `break-after` property instead—it’s more reliable. It could solve some of those unexpected overflow problems you’re running into with dynamic data!
That sounds like a solid approach! Have you faced any issues with the learning curve when integrating React components with pdfmake? Just curious if it's been straightforward.