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.
But here are the challenges I started facing after couple of hours :
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.
Lacks support to load images using their url on header & footer - They suggested to use base64 image
I want to have 5px border on pages.
Now here is the output I am able to achieve using puppeteer :
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 :
- 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.
- 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 email@example.com too.