Puppeteer没有渲染颜色,当我试图在磁盘上保存PDF时背景颜色



这是我的node.js和HTML模板代码,它从HTML模板创建PDF。它没有加入颜色。

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>

当我打开output.pdf时,它只显示黑色的"Hello world",而不是红色的。

Puppeter只是一个驱动Chrome/Chromium的库,因此,如果在使用它时出现任何问题,我们最好使用puppeteer.launch({headless:false})打开Chromium并在那里进行调试。

<style></style>标记中设置页面css。

您可以使用以下CSS代码来解决此问题:

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

对我来说,我在stackoverflow上找到的解决方案都不起作用。我几乎";失去希望";。但在浏览了我发现的所有信息后,真正重要的是:

  1. printBackground选项必须设置为TRUE,例如:page.pdf({ path: "./my.pdf", printBackground: true });
  2. 添加到背景或颜色值!important,例如:
p {
color: #FF0000 !important; 
}

就是这样。

附言:关于-webkit-print-color-adjust: exact;,它对我来说毫无用处。我目前有Puppeteer v.5.0。

最新更新