Headless Chrome not detecting css and Background image of the webpage

问题

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();
})();

It should take complete web page layout with all CSS

回答1:

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');

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
});