CODEWITHSUNDEEP
javascriptnode.jspuppeteer
Pawel
Pawel

Reputation: 41

Render header on all pages in puppeteer

When I set displayHeaderFooter to true, the header will not render. It works only when I set margin to @page in CSS, but then the page height is increased by margin value and page content is rendered outside of the page.

Is there a solution for the headline to appear on every page without bugs ?

Upvotes: 4

Views: 2715

Answers (1)

Thomas Dondorf
Thomas Dondorf

Reputation: 25280

You can set the margin of the content by using the margin option of page.pdf. By default the margin is 0 for all sides, therefore if you set a header without a margin it will be hidden behind the content of the page.

The margin you set via this option, will not increase the height of the page. If possible, I would recommend to not use the @page rules from CSS, as there are multiple known bugs (see this answer for more information).

Code sample

Here is an minimal example which sets a header for all pages and sets the margin to 20mm to make it visible:

await page.pdf({
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size:5mm;">Your header text</div>',
    margin: {
        top: '20mm'
    },
    path: 'example.pdf'
});

Upvotes: 2

Related Questions