Looking for a way to create a design-heavy, data-driven, beautifully styled PDF report — server-side with similar tools to what you are already using on the front-end? Stop your Google search. You’ve come to the right place. I was in the same boat as you a few months ago while helping a client with this exact problem. In order to accomplish this feat, I developed a four-step solution using Puppeteer, D3, and handlebars. In this post, I’ll give you step by step instructions on creating server-side pdf reports. Let’s dive in.

Example of a D3 generated page using handlebars and puppeteer

In this post, we’ll cover

• Setting up Puppeteer & Handlebars
• Creating a generator to make our PDF
• Building out a handlebars template
• Adding the finishing touches

The challenges of creating these PDF reports:

Because we’re using a template framework to access standard web technologies along with puppeteer to manage the pdf, we’ll need to think about these things during development:

• Pages will manually need to be constrained.
• We won’t have access to css media props other than “screen.” (no “page-break-after” or the print media type)
• We won’t be able to use dev tools to debug irregularities once the PDF is compiled and rendered.
• Puppeteer itself adds extra build time and size to your deployments.
• Generating a report can take a while depending on file size.

#puppeteer #web-development #nodejs #javascript #d3js