Extra whitespace above the header and below the footer. #4132

karthiktheking · 2019-03-07T11:19:48Z

Steps to reproduce

Tell us about your environment:

Puppeteer version: puppeteer@1.13.0
Platform / OS version: OSX 10.11
URLs (if applicable):
Node.js version: npm@6.8.0

What steps will reproduce the problem?

I have configured a header and footer for the site example.com and I have got the following issue.

Please include code that reproduces the issue.

1 JS code

const puppeteer = require("puppeteer");

(async () => {const browser = await puppeteer.launch({headless:true});

const page = await browser.newPage(); 
var fs = require("fs"); 

await page.goto("https://example.com/"); 

await page.pdf({path: "./output/1.pdf",

 format: "A4",

 displayHeaderFooter:true,
 
headerTemplate:"<div style=' font-size: 28px; width:100%; -webkit-print-color-adjust: exact;height:180px; min-height: 69px;overflow: auto;clear: both;border-bottom: 1px solid #ddd;background: red;' >Header</div>", 

footerTemplate:"<div style=' font-size: 28px;  width:100%; -webkit-print-color-adjust: exact;height:180px; min-height: 69px;overflow: auto;clear: both;border-bottom: 1px solid #ddd;background: red;'> Footer</div>", 

printBackground : true, 

preferCSSPageSize:false,

margin : {top: "120px", bottom : "120px"
} 
} ); 
await browser.close(); })();

What is the expected result?

The pdf with no white space above the header and below footer, with content in the footer

What happens instead?

There is an extra whitespace above the header and below the footer and added to tat the footer is also generated empty without content.

I have attached the output pdf

1.pdf

The text was updated successfully, but these errors were encountered:

zhm · 2019-03-21T04:28:37Z

You have to override this style using a <style> tag in your header and footer content:

<style>#header, #footer { padding: 0 !important; }</style>

pacocom · 2019-11-27T14:43:33Z

Not working for me:
<style>#header, #footer { padding: 0 !important; }</style>

const content = `
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: green;
  }
  .page {
    page-break-after: always;
  }
</style>

<body>
  <div class="page">
    BODY CONTENT
  </div>
</body>
`;

const header = '<div class="header" style="padding: 0 !important; margin: 0; -webkit-print-color-adjust: exact; background-color: red; color: white; width: 100%; text-align: left; font-size: 12px;">header of Juan<br /> Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>';
const footer = '<div class="footer" style="padding: 0 !important; margin: 0; -webkit-print-color-adjust: exact; background-color: blue; color: white; width: 100%; text-align: right; font-size: 12px;">footer of Juan<br /> Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>';

await page.setContent(content, { waitUntil: ['domcontentloaded', 'networkidle2'] });

  await page.pdf({
    // path: null, // buffer pdf
    format: 'A4',
    landscape: false,
    printBackground: true,
    margin: { top: '2cm', bottom: '2cm' };
    displayHeaderFooter: true,
    headerTemplate: header,
    footerTemplate: footer,
  });

In which file should this code be added?
<style>#header, #footer { padding: 0 !important; }</style>

vekunz · 2020-01-16T13:10:48Z

Add it directly to you header or footer template:

const header = '<style>#header, #footer { padding: 0 !important; }</style><div class="header" style="padding: 0 !important; margin: 0; -webkit-print-color-adjust: exact; background-color: red; color: white; width: 100%; text-align: left; font-size: 12px;">header of Juan<br /> Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>';
const footer = '<style>#header, #footer { padding: 0 !important; }</style><div class="footer" style="padding: 0 !important; margin: 0; -webkit-print-color-adjust: exact; background-color: blue; color: white; width: 100%; text-align: right; font-size: 12px;">footer of Juan<br /> Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>';

pacocom · 2020-01-16T14:07:10Z

Thanks! Working!

R00118189 · 2020-05-03T20:49:38Z

Hi, Any suggestions how to set margins of the footer / header in cm same as for the main document ?

dasheck0 · 2020-05-12T13:13:01Z

@R00118189 Good question. Currently working on the same. Let me know if you found a way :)

EDIT: I found this article: https://nathanfriend.io/2019/04/15/pdf-gotchas-with-headless-chrome.html Maybe this helps you to resolve this issue. Especially section: https://nathanfriend.io/2019/04/15/pdf-gotchas-with-headless-chrome.html#headers-and-footers-require-explicit-margins-to-be-visible

iamsrujal · 2020-06-04T13:03:37Z

Add it directly to you header or footer template:

const header = '<style>#header, #footer { padding: 0 !important; }</style><div class="header" style="padding: 0 !important; margin: 0; -webkit-print-color-adjust: exact; background-color: red; color: white; width: 100%; text-align: left; font-size: 12px;">header of Juan<br /> Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>';
const footer = '<style>#header, #footer { padding: 0 !important; }</style><div class="footer" style="padding: 0 !important; margin: 0; -webkit-print-color-adjust: exact; background-color: blue; color: white; width: 100%; text-align: right; font-size: 12px;">footer of Juan<br /> Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>';

Bhavu it's working...Thank you

R00118189 · 2020-06-07T09:17:04Z

@dasheck0 still trying - the margins as cm don't work in the header (1cm translates to 13mm when PDF opened in illustrator, note the main body margin is 10mm as intended)
my workaround now is to create 210x297mm size SVG and keep margins 0;

also is there any way to use fonts in the header and footer if we cant have external links?

AamuLumi · 2020-06-11T00:33:18Z

Hey! I worked on this bug during the whole day, and I find some solutions for all these space bugs. I'll try to provide some explanation (or at least some documentation) to keep a trace of everything for the future (and possible fixes).

it can be good to add these tricks somewhere in the documentation.

Padding after the header and before the footer

This is the default style provided by Chrome with print_header_footer_template_page.html. You can solve this by adding :

<style>#header, #footer { padding: 0 !important; }</style>

This style must be added in the headerTemplate or the footerTemplate code.

Padding in the content

Strangely, the default body contains margin or padding, so just remove it with :

body {
  padding: 0 !important;
  margin: 0 !important;
}

This one must be in the CSS of the document which will be printed.

Compute the header and the footer with correct cm sizes

This one gives me some headache.
The problem is the header and the footer are bigger than the real display. For example, a square of 1x1cm will be displayed as a square of ~1.5 x ~1.5cm.
Here's the issue in Chromium bug tracker.

The bug seems caused by an auto-scaling of 1.33f (see here). So we can fix it by computing our header/footer in a bigger size.

In our case, we work with an A4 document (21x29.7cm). Compute your headerTemplate/footerTemplate with a width of 27.93cm (21 * 1.33), and scale down to the real size by a transform. Here's an example :

<style> #header { padding: 0; width: 21cm; } </style>
<div class="my-header" style="height: 4cm; width: 27.93cm; transform: scale(0.75); transform-origin: top left">
    This is a real size header
</div>

By doing this, you can get the same result than an HTML computed header.

I hope it will help some people to create their documents. :)

perifer · 2020-09-10T10:49:01Z

The scaling solution by @AamuLumi works really well, thanks! One little modification: For an A4 document the width should be 28cm, not 27.93cm (21 x 1.333333333 = 27.99999993).

SC-saurabh · 2022-10-04T10:43:29Z

Guys any of the solutions don't seem to be working.

neongrau · 2022-12-13T16:36:59Z

Started with trying to figure out the spacing above and below too, then went on to figure out the scaling issue.
As i have some landscape and some portrait PDFs to print i tried to find a general solution and it seems this works regardless of orientation and page size/width.

Note the #header and #footer ids are internally used by chromium.
If you already use these ids in your HTML and CSS for PDF generating you are in for a bad ride.
So get rid of them if you have and add this snippet to your header and footer HTML.

#header, #footer {
  padding: 0 !important;
  transform: scale(0.75) !important;
  transform-origin: top left;
  height: 100% !important;
  position: fixed;
}

While the transform scale alone would just make the width smaller, setting height and position: fixed as well will help render it at the same original width (weird actually, but not complaining) without having to set the width explicitly. At least for me. Maybe it helps the next one running into this issue.

tavoyne · 2023-02-23T11:56:30Z

Easier:

#footer, #header {
  all: unset;
}

You might need to toss in an !important flag.

khang-it · 2024-04-05T01:37:12Z

headerTemplate:
<div style='...; margin-top: -15px;'>Header</div>
footerTemplate:
<div style='...; margin-bottom: -15px;'>Footer</div>

Puppeteer:
^12.0.1
Nodejs:
18.14.x

codeart1st · 2024-06-21T13:17:22Z

Since Chrome 117+ it's fixed. No need to scale the content with 1.333f

chromium/chromium@f6529c7

aslushnikov closed this as completed Apr 22, 2019

SoerenWeber mentioned this issue Apr 22, 2019

Default margins for header and footer are already added #3672

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extra whitespace above the header and below the footer. #4132

Extra whitespace above the header and below the footer. #4132

karthiktheking commented Mar 7, 2019 •

edited

Loading

zhm commented Mar 21, 2019 •

edited

Loading

pacocom commented Nov 27, 2019 •

edited

Loading

vekunz commented Jan 16, 2020

pacocom commented Jan 16, 2020

R00118189 commented May 3, 2020

dasheck0 commented May 12, 2020 •

edited

Loading

iamsrujal commented Jun 4, 2020

R00118189 commented Jun 7, 2020

AamuLumi commented Jun 11, 2020 •

edited

Loading

perifer commented Sep 10, 2020 •

edited

Loading

SC-saurabh commented Oct 4, 2022

neongrau commented Dec 13, 2022 •

edited

Loading

tavoyne commented Feb 23, 2023

khang-it commented Apr 5, 2024 •

edited

Loading

codeart1st commented Jun 21, 2024

Extra whitespace above the header and below the footer. #4132

Extra whitespace above the header and below the footer. #4132

Comments

karthiktheking commented Mar 7, 2019 • edited Loading

Steps to reproduce

zhm commented Mar 21, 2019 • edited Loading

pacocom commented Nov 27, 2019 • edited Loading

vekunz commented Jan 16, 2020

pacocom commented Jan 16, 2020

R00118189 commented May 3, 2020

dasheck0 commented May 12, 2020 • edited Loading

iamsrujal commented Jun 4, 2020

R00118189 commented Jun 7, 2020

AamuLumi commented Jun 11, 2020 • edited Loading

Padding after the header and before the footer

Padding in the content

Compute the header and the footer with correct cm sizes

perifer commented Sep 10, 2020 • edited Loading

SC-saurabh commented Oct 4, 2022

neongrau commented Dec 13, 2022 • edited Loading

tavoyne commented Feb 23, 2023

khang-it commented Apr 5, 2024 • edited Loading

codeart1st commented Jun 21, 2024

karthiktheking commented Mar 7, 2019 •

edited

Loading

zhm commented Mar 21, 2019 •

edited

Loading

pacocom commented Nov 27, 2019 •

edited

Loading

dasheck0 commented May 12, 2020 •

edited

Loading

AamuLumi commented Jun 11, 2020 •

edited

Loading

perifer commented Sep 10, 2020 •

edited

Loading

neongrau commented Dec 13, 2022 •

edited

Loading

khang-it commented Apr 5, 2024 •

edited

Loading