无头 Chrome 未检测到网页的 css 和背景图像

【问题标题】：Headless Chrome not detecting css and Background image of the webpage无头 Chrome 未检测到网页的 css 和背景图像
【发布时间】：2019-08-06 09:42:25
【问题描述】：

我的 pdf 页面没有背景图片和页面的任何 CSS。你能告诉我如何解决这个问题吗？

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://sigview.sigmoid.io/app/#/signIn', 
  {waitUntil: 'networkidle2', timeout: 0});
  await page.waitFor(20000);
  await page.pdf({path: 'sigview.pdf', format: 'A4'});

  await browser.close();
})();

它应该采用所有 CSS 的完整网页布局

【问题讨论】：

标签： css angularjs-directive headless-browser

【解决方案1】：

默认情况下，当您将页面保存为 PDF Puppeteer 时，将使用 print 样式，而您大多缺少这些样式（我已经看到有很多样式，但没有任何样式可以设置登录页面的样式，AFAIK）。但是有一个解决方案。一、puppeteer中强制模拟屏幕

 await page.emulateMedia('screen');

然后在您的 pdf 方法调用中添加一些 printBackground: true 属性。没有它，Puppeteer 将忽略背景图像（这是默认行为）

await page.pdf({path: 'sigview.pdf', format: 'A4', printBackground: true});

因此，您会得到类似的结果：

await page.emulateMedia("screen");
await page.pdf({
  path: "sigview.pdf",
  format: "A4",
  printBackground: true
});

更多阅读 PDF 选项docs

顺便说一句，有什么理由将20000 设置为waitFor 的值？

【讨论】：