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

Question

我的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完整的网页布局

Answer 1

默认情况下，在将页面另存为PDF时，Puppeteer会使用print样式，而您几乎没有使用它(我见过很多这样的样式，但没有一种可以设置登录页面的样式，即AFAIK)。但这个问题有一个解决方案。首先，在木偶操纵者中强制屏幕模拟

 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的更多阅读

顺便说一句，为什么要将waitFor的值设置为20000，有什么原因吗