html5-to-pdf icon indicating copy to clipboard operation
html5-to-pdf copied to clipboard

Published 20 hours ago • verified publisher icon peterdemartini

header and footer

Open Gerigot opened this issue 7 years ago • 7 comments

Is there a way to insert a page header or footer? I'm trying to use it and it works really well but I can't find the way to add page numbers or a logo in the Header.

I've tried with: @page { size: A4; @top-center { content: "header"; } } but it's not working.

Gerigot avatar Jul 18 '17 12:07 Gerigot

Consider using an HTML element with CSS style: position: fixed; top: 0; left: 0; width: 100% for a header position: fixed; bottom: 0; left: 0; width: 100% for a footer

soryy708 avatar Jan 08 '18 08:01 soryy708

In version v3 I moved to using puppeteer since they can specify header and footer templates. Check out their docs here, you can pass them into html5-to-pdf by using options.pdf

peterdemartini avatar Apr 26 '18 14:04 peterdemartini

I am using @soryy708 's solution. (we have an older version of html5-to-pdf, 2.x.x). it works fine, until the content is too long and overlaps with header. Is there any solution for this?

BenjaminHorn avatar Jun 21 '18 16:06 BenjaminHorn

Unfortunately not unless you use v3

peterdemartini avatar Jun 21 '18 18:06 peterdemartini

I'm trying to use the header and footer template, but this does not seem to be doing anything. I passed the 'pdf' option, containing this code: pdf: { headerTemplate: '', footerTemplate: '<div>Test</div>', displayHeaderFooter: true, format: 'A4', margin: { left: '2.5cm', right: '2.5cm', top: '1cm', bottom: '2cm', }, }, The header (which I don't want) is showing a default template (date and document name) and the footer is not showin at all. Is this a problem with this lib, or a puppeteer thing?

W3Technics avatar Jun 20 '19 10:06 W3Technics

I'm trying to use the header and footer template, but this does not seem to be doing anything. I passed the 'pdf' option, containing this code: pdf: { headerTemplate: '', footerTemplate: '<div>Test</div>', displayHeaderFooter: true, format: 'A4', margin: { left: '2.5cm', right: '2.5cm', top: '1cm', bottom: '2cm', }, }, The header (which I don't want) is showing a default template (date and document name) and the footer is not showin at all. Is this a problem with this lib, or a puppeteer thing?

Did you find a fix for this, came across the same issue

lovetodream avatar May 30 '20 10:05 lovetodream

I think this is a puppeteer problem, what html5-to-pdf does is relatively simple, most of the pdf generation logic is inside puppeteer/chromium.

peterdemartini avatar May 31 '20 22:05 peterdemartini