无头Chrome无法检测到网页的CSS和背景图片 [英] Headless Chrome not detecting css and Background image of the webpage

问题描述

我的pdf页面没有背景图片和该页面的任何CSS.您能告诉我如何解决此问题吗?

My pdf page don't take background image and any CSS of the page. Can you please tell me how to resolve this issue?

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都应采用完整的网页布局

It should take complete web page layout with all CSS

推荐答案

默认情况下，将页面另存为PDF时，Puppeteer会使用print样式，而这些样式通常都是您所缺少的(我见过很多，但没有任何样式可以设置登录页面的样式(AFAIK).但是有一个解决方案.首先，在木偶戏中强制进行屏幕仿真

By default, when saving your page as PDF Puppeteer would use print styles, which you're mostly missing (I've seen there's bunch of them, but nothing that would style the login page, AFAIK). But there's a solution to this. First, force screen emulation in puppeteer

 await page.emulateMedia('screen');

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

and then add some printBackground: true property to your pdf method call. Without it Puppeteer will ignore background images (that's default behaviour)

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

结果，您将得到类似的内容:

As a result, you would have something like that:

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

有关PDF选项的更多阅读 docs

More reading on PDF options docs

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

BTW, is there any reason why set 20000 as value of waitFor?

这篇关于无头Chrome无法检测到网页的CSS和背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！