Puppeteer 和 Google Chrome 无头：CSS @media 对渲染 PDF 的影响答案

【问题标题】：Puppeteer & Google Chrome headless: influence of CSS @media on rendered PDFPuppeteer 和 Google Chrome 无头：CSS @media 对渲染 PDF 的影响
【发布时间】：2018-01-11 13:28:45
【问题描述】：

我正在使用 Puppeteer 从 HTML 页面中呈现 PDF。

在呈现为 PDF 之前，我将媒体类型指定为“屏幕”：

await page.emulateMedia('screen');

假设我有一个 HTML 页面，其中 <body> 元素具有白色背景。

在这种情况下，我期待这种样式是否正确：

@media screen {
  body {
    background: #ff0000;
  }
}

将使 Puppeteer 呈现 PDF，其中元素的背景颜色为#ff0000？

我问是因为它在我的机器上不起作用，我想消除任何已知问题或其他问题。

【问题讨论】：

标签： javascript css pdf-generation puppeteer google-chrome-headless

【解决方案1】：

您的假设是正确的，但请确保在尝试打印之前将page.pdf() 中的printBackground 选项设置为true。

否则，background 的颜色和图形将无法打印。

await page.emulateMedia('screen');

await page.pdf({
  path: 'example.pdf',
  printBackground: true,
});

【讨论】：