Wrong rendering of header and footer when generating a pdf
Reported by
jerome...@gmail.com,
Mar 4 2018
|
||||||||
Issue description
Chrome Version : HeadlessChrome/66.0.3347.0 (on Windows 10 64bits)
What steps will reproduce the problem?
I use puppeteer@1.1.1 to generate a pdf.
I execute this code in Node.js (v8.9.3):
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent("Hi !");
await page.pdf({
path: 'output.pdf',
format: 'A4',
displayHeaderFooter: true,
headerTemplate: "<div style='height: 1cm; width: 1cm; background: red; border: dashed black; -webkit-print-color-adjust: exact;'>",
footerTemplate: "<div style='height: 1cm; width: 1cm; background: red; border: dashed black; -webkit-print-color-adjust: exact;'>",
printBackground: true,
margin: { left: "0cm", right: "0cm", top: "10cm", bottom: "10cm" },
});
await browser.close();
})();
I get the attached pdf.
What is the expected result?
A 1cm² red square in the header with its top left corner at the top left corner of the A4 page.
A 1cm² red square in the footer with its bottom left corner at the bottom left corner of the A4 page.
What happens instead?
Squares are bigger than 1cm².
They are not exactly in the corners.
Please provide any additional information below. Attach a screenshot if
possible.
Cf output pdf and screenshot with rulers.
,
Mar 5 2018
,
Mar 6 2018
This *seems* like a more general printing issue rather than a headless one.
,
Mar 7 2018
It would be nice if we can figure out how to reproduce this without headless mode / puppeteer. I haven't tried. The red squares are 1.553 cm in output.pdf. Looking at the header/footer template, [1] the header and footer are not expected to the corner. [1] https://chromium.googlesource.com/chromium/src/+/9350d9dc037bfed22f896f8b324e589f7df0f895/components/printing/resources/print_preview_page.html
,
Mar 7 2018
It's strange that the header and footer are not expected to the corner. The 0.4cm padding should be in the default template, not with a custom template...
,
May 10 2018
To answer my own question in comment 4, I can change the page::PrintToPDFParams::Builder in HeadlessShell::PrintToPDF() to add: SetHeaderTemplate(...) 1) We could potentially remove the default 0.4cm padding with custom templates. Though one concern is those who are relying on the existing behavior with custom templates will be surprised. 2) Adding "border: dashed black" makes the square bigger than the specified dimensions. This is the case on regular webpages as well, I believe. 3) Even without the border, the square is still a bit too big.
,
May 10 2018
For issue (1), I'm wondering if it is possible to override the default #header style somehow in the header template. I'm terrible at CSS, so I have no idea. For issue (2), that is a WontFix because that's how CSS works. I checked with Firefox as well. Bordered squares are bigger. I don't have a Windows computer to test with, but it may be the case that issue (3) is only on Linux. If the square is only a tiny little bit bigger on Windows, then that's likely due to issue (2). Issue (3) may be due to the |fudge_factor| in Linux-only printing code.
,
May 10 2018
Is this related to https://chromium-review.googlesource.com/c/chromium/src/+/813177 ?
,
May 10 2018
Over to lushnikov, if we make a call suggesting that margin should be removed, he would make sure customers are not affected... |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by sindhu.chelamcherla@chromium.org
, Mar 4 2018