puppeteer: [PDF] Using different margin bottom on first page doesn't work

Steps to reproduce

Environment:

Puppeteer version: 1.3.0
Platform / OS version: Ubuntu 14.04
Node.js version: 7.6.0

Code:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://github.com/GoogleChrome/puppeteer', {waitUntil: 'networkidle2'});
await page.addStyleTag({
    content: '@page:first {margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px;}'
});
await page.pdf({
    path: 'test.pdf',
    format: 'A4',
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size:16px;width:100%;text-align:center;">HEADER</div>',
    footerTemplate: '<div style="font-size:16px;width:100%;text-align:center;">FOOTER</div>',
    margin: {top: '50px', right: '10px', bottom: '50px', left: '10px', }}
);
await browser.close();

Expected result: The first page should have no margins (and therefore hide the header and footer), while all following pages should have the specified margin and display the header and footer.

Actual result: The header is properly displayed on all pages except the first one. The footer, however, is only displayed on the last page. It seems that the margin bottom isn’t applied properly.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 17 (1 by maintainers)

Most upvoted comments

Issue still exists, but it’s in chromium. There is actual bug related to the issue.

AntonZaets on Aug 11, 2022

Any updates on this?

spiritix on May 19, 2020

@hakimio This is what I tried first. It results in exactly the same (wrong) PDF. Therefore I assume, that the margin option of the page.pdf() internally produces CSS as well.

However, I just discovered something really interesting. Have a look at the following two PDF files:

No footer/header: https://drive.google.com/open?id=12jshVH0_hz3S-JK-wCqxxrs3h0IuDDDu With footer/header: https://drive.google.com/open?id=1IcF2PQ1MC5jOr3WsVtj1KCQKt57Qriqt

As you can see, as soon as I set the displayHeaderFooter option to true, the margin-bottom gets ignored. This happens with both, using regular CSS as well as using the margin option of the page.pdf() method.

spiritix on May 24, 2018

I also experience this bug (tried it with puppeteer version 1.14.0 and 1.17.0).

In the HTML page I have:

@page:first{margin:0;}@page:first {margin:4cm;}

It works as expected, as long as you do not set displayHeaderFooter to true. In that case the fist page gets no margins as expected, but the next pages have no margins on the right and bottom.

When trying to print this in the chrome browser you will not experience this problem, this makes sense because we do not get to set the displayHeaderFooter property.

HTML to reproduce this: https://jsfiddle.net/prya18Lw/

Jan-Timon on Jun 18, 2019

Have you tried the preferCSSPageSize ? This allows you to specify the margin’s for page in the CSS and it will take priority:

@page {
  size: A4 portait;
  margin: 0;
}

garygreen on Sep 14, 2018