Menu
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.
392
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;
}
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:
printBackground option has to be set to TRUE, e.g.:
page.pdf({ path: "./my.pdf", printBackground: true });
!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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
