Puppeteer not rendering color, background color when I try to save PDF on disk

Question

This is my node.js and HTML template code which creates a PDF from an HTML template. It's not putting in the colors.

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto("file:///D:/pdf_export/template/template.html");
    await page.pdf({
        path: 'output.pdf',
        printBackground: true
    });
    await browser.close();
})()

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
        <p style="color: red;">Hello World</p>
    </body>
</html>

When I open the output.pdf, it only shows 'Hello world' in black not in red.

Can you check if the URL path matches the one you created for the HTML — Rajan Sohal, Mar 18 '20 at 09:23
I have post the answer, can you please check that on your end. — Deep Kakkar, Mar 18 '20 at 09:33

Deep Kakkar · Accepted Answer · 2020-03-18T09:29:31.773

69

Puppeteer is just a library to drive Chrome/Chromium, so if anything goes wrong while using it, our best bet is to open Chromium with puppeteer.launch({headless:false}) and debug there.

Set your page css in <style></style> tag.

You can solve the issue with the following CSS code:

html {
  -webkit-print-color-adjust: exact;
}
p {
  color: #FF0000; 
}

edited Mar 18 '20 at 09:29

answered Mar 18 '20 at 09:23

Deep Kakkar

5,831
4
39
75

2

What a solution!! it's working perfectly for me. Thanks a lot. – Lead Developer May 23 '22 at 05:35
1

Except that generating a pdf only works in headless mode. The provided solution works but setting `headless` to `false` is not "our best bet" in this case, just saying. – Nano Miratus Jun 28 '22 at 11:22
1

I have absolutely no idea why this worked, but it's one of those try-it-and-it-solves-everything answers! – Andy Brown May 19 '23 at 11:41

score 48 · Answer 2 · edited Feb 15 '21 at 19:10

48

For me none of the solutions I found on stackoverflow worked. I almost "lost hope". But after playing around with all the info I found, all that really mattered was:

the printBackground option has to be set to TRUE, e.g.: page.pdf({ path: "./my.pdf", printBackground: true });
add to your background or color values !important, e.g.:

p {
  color: #FF0000 !important; 
}

That's it.

P.S. regarding the -webkit-print-color-adjust: exact; it was useless in my case. I have currently Puppeteer v5.5.0.

edited Feb 15 '21 at 19:10

Dharman

30,962
25
85
135

answered Feb 15 '21 at 19:05

nostop

743
5
9

4

Thanks man, you saved some hairs from my head with the "printBackground: true" – Foxlab Feb 19 '21 at 13:50
Perfect! This a first time I use `puppeteer` and you same me hours of tinkering about why no background is in the generated PDF. Just a note: I tested this with `product: 'firefox'` and it works as expected! ;) – tukusejssirs Mar 28 '21 at 16:51
the "printBackground"-Option is the important part here. Otherwise no "background-color" stuff is printed ad all.. Thank you! – Stefan Nov 24 '21 at 13:13
1

"printBackground" is needed, but nothing worked without also adding "!important" for me as well. – akaspick Jan 17 '22 at 01:42
"printBackground: true" worked for me. Thank you! – pradeep Nov 18 '22 at 06:39

Puppeteer not rendering color, background color when I try to save PDF on disk

2 Answers2

Linked