我正在使用 Puppeteer 从 HTML 内容生成 PDF 报告，但遇到了一个问题，即 HTML 中定义的背景颜色属性在生成的 PDF 中被忽略。我已确保 HTML 内容包含具有背景颜色属性的内联样式，但背景颜色未应用于 PDF 输出中。
这是我正在使用的代码的简化版本：
const puppeteer = require('puppeteer');
async function generatePDF() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
const htmlContent = `
<html>
<head>
<title>PDF Report</title>
</head>
<body>
<div style="background-color: red; padding: 20px;">
<h1>Sample Report</h1>
<p>This is a sample PDF report with a red background.</p>
</div>
</body>
</html>
`;
await page.setContent(htmlContent);
const pdfBuffer = await page.pdf({ format: 'A4' });
await browser.close();
return pdfBuffer;
}
generatePDF().then(pdfBuffer => {
// Handle PDF buffer
});
在上面的代码中，我将 HTML 内容中的元素的背景颜色属性设置为红色。但是，当我使用 Puppeteer 生成 PDF 时，背景颜色不会应用到输出 PDF 中。
我已验证 HTML 内容的格式是否正确，并且其他样式（例如填充）是否按预期应用。我想知道 Puppeteer 的渲染引擎是否存在限制或问题，导致它专门忽略背景颜色属性。
如何确保 HTML 中定义的背景颜色属性正确应用到使用 Puppeteer 生成的 PDF 输出中？
浏览器的默认行为是不打印背景。事实上，从 docs 来看，有特殊的处理来处理颜色：
要生成具有屏幕媒体类型的 PDF，请调用
在调用 page.pdf() 之前。page.emulateMediaType('screen')默认情况下，page.pdf()会生成一个带有修改颜色的pdf 印刷。使用
属性强制 渲染精确的颜色。-webkit-print-color-adjust
第二个意思是在相关CSS中添加规则
print-color-adjust: exact;