DEV Community

Irfan Raza
Irfan Raza

Posted on

[Suggestion Needed] : Generate complex PDF using puppeteer

While chrome headless is best option out in the market with open source tag for generating PDF, screenshot or almost anything else which actually chrome can do. I tried using it for generating PDF out of my HTML.

This is what I wanted as end output

Page 2 :

But here are the challenges I started facing after couple of hours :

  1. Lack of support to load external resources for headerTemplate (we can't use external css) - This can be solved by using inline css but in my case I found it very difficult to write inline css as the header was complex. It has images, svg and other positioning style. And not to mention, this blue highlighted box should auto repeat on every page.

  2. Lacks support to load images using their url on header & footer - They suggested to use base64 image

  3. I want to have 5px border on pages.

Now here is the output I am able to achieve using puppeteer :

  1. The border breaks and doesn't respect the page.Here I haven't set the separate header template and hence not receiving the header on 2nd page.

  2. If I set header template separately then border behaves weird. It starts after header template finishes


Now at this stage I had read on web and found some suggestion which are as per below :

  1. I should give top, left and right border to my headerTemplate and then should give left, right and bottom border to my body. This way final output will look like the first image.
  2. I got to know about pdf merge, where I have been suggested to generate one page pdf having header only and then other pages (with top margin left enough to fit header) without header. And then finally merging header pdf to each of other pages using some pdf utilities.

Before jumping into above approach, I would like to know if dev community has come across similar case and if someone can guide to find the perfect way out of it. You can reach me on too.

Top comments (4)

mtrantalainen profile image
Mikko Rantalainen

Have you already tried ?

irfaan008 profile image
Irfan Raza

This looks promising solution. By the way, I was able to accomplish it with puppeteer itself.

bvdeepak profile image
Deepak Dhaka

Hi Irfan,

I am also facing the same issue, can you please tell me how did you solve the issue?


Thread Thread
irfaan008 profile image
Irfan Raza

@deepak nothing helpful from puppeteer side. All I had to do using css only. I engaged with designer and got the single page designed as 3 pages.

  1. header
  2. body
  3. footer

I then use online tool to convert header & footer html with external css to html with embedded css.