CODEWITHSUNDEEP
node.jspuppeteergoogle-chrome-headless
Anthony Granger
Anthony Granger

Reputation: 814

Puppeteer footer only display on last page

I have got a problem with the footerTemplate parameter of Puppeteer : the footer is only shown in the last page of the document. I want it to be displayed on every page of the document (well... a footer).

Maybe am I not using the parameters correctly ?

Here is my Puppeteer pdf generation :

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://localhost:8000/?' + parameters);
await page.pdf({
    path: path,
    format: 'A4',
    displayHeaderFooter: true,
    footerTemplate: '<h1>THIS IS A TEST</h1>'
});
await browser.close();

Thank you for your help !

Upvotes: 6

Views: 9499

Answers (4)

Peter
Peter

Reputation: 51

I came up to this problem as well, and margin settings for puppeteer did not work for me, as my whole webpage was a table. So even though I set bottom margin in puppeteer, the footer was still under the content. I fixed it with the following CSS:

@media print {
    @page {
        margin-bottom: 1.5rem;
    }
}

Upvotes: 5

bsides44
bsides44

Reputation: 1

I had this problem, I needed to change my margins from

marginTop: 100,
marginBottom: 70

to

margin: {
        top: '100px',
        bottom: '70px',
    }

Upvotes: 0

TheZerg
TheZerg

Reputation: 106

Based on my experience with the lib, header / footer are goes behind the content of the page. Try setting some margins to make them visible:

await page.pdf({
    path: path,
    format: 'A4',
    displayHeaderFooter: true,
    footerTemplate: '<h1>THIS IS A TEST</h1>',
    margin : {
            top: '20px',
            right: '20px',
            bottom: '20px',
            left: '20px'
        };
});

Upvotes: 9

Bernie
Bernie

Reputation: 5055

This is a weird issue but was able to reproduce it.

When searching for text "THIS IS A TEST" it's found as often as the amount of pages in the PDF... But only on the last page the text "THIS IS A TEST" has a color.

Try CTRL+F or CMD+F and search for "THIS IS A TEST".

Look on a page within the document it's there but not shown (marked due to search):

enter image description here

But on the last page it's visible:

enter image description here

There's an open issue on gitHub related to yours puppeteer/issues/1853

Upvotes: 0

Related Questions