Puppeteer и Google Chrome headless: влияние CSS @media на рендеринг PDF

Я использую Puppeteer для рендеринга PDF из HTML-страниц.

Я указываю тип носителя как screen перед рендерингом в PDF:

await page.emulateMedia('screen');

Предположим, у меня есть HTML-страница, на которой элемент <body> имеет белый фон.

Правильно ли я ожидал в этих условиях такой стилистики:

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

заставит Puppeteer отобразить PDF-файл, в котором фон элемента будет окрашен #ff0000?

Я спрашиваю, потому что это не работает на моей машине, и я хочу устранить все известные проблемы или другие проблемы.

javascript css puppeteer pdf-generation google-chrome-headless

ACEG 11.01.2018 источник

arrow_upward
2
arrow_downward

Вы правы в своем предположении, но убедитесь, что параметр printBackground в page.pdf() устанавливается на true перед попыткой печати.

В противном случае цвета и графика background не будут напечатаны.

await page.emulateMedia('screen');

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

Grant Miller 23.07.2018