当我使用@media print 时，Puppeteer 忽略了一些 CSS 规则来打印 PDF

Question

当我使用 puppeteer 将 html 打印为 pdf 时，我遇到了一个奇怪的问题。我发现 puppeteer 师总是忽略@media print 中的一些 CSS 规则。

这是我的环境:

puppeteer 版:1.11
平台/操作系统版本:Win10/CentOS7
Node.js 版本:10.15.0

CSS 代码:

@media print {
    .flipbook-viewport .flipbook{
        width: 794px!important;
        height: 1123px!important;
        max-height: 1123px;
        max-width: 794px;
        background-color: red;
    }

    .right-01 .image {
        width: 92%;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url('../image/content/test.png');
        height: 920px;
        /* width: 740px; */
        margin-top: 0.8rem;
    }
}

您会注意到我设置了背景颜色来检查测试结果。在我的测试中，当我使用 page.emulateMedia('print') 执行 puppeteer 时，翻书视口(viewport)和翻书的规则工作正常。但是 right-01 和 image 不起作用。

但有趣的是，当我以相同的规则使用@media 屏幕(也将 page.emulateMedia 更改为屏幕)时，它们都运行良好。所以我认为puppeteer可能有一些问题。

预期的结果是什么？
good.pdf

相反会发生什么？
wrong.pdf

有没有人遇到过这个问题？如何解决这个问题？请帮忙。

我的 puppeteer 代码示例:

const puppeteer = require('puppeteer-core');

(async () => {
    const browser = await puppeteer.launch({executablePath:'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'});
    const page = await browser.newPage();
    await page.goto('http://www.kaol.org/TurnPage/', {waitUntil: 'networkidle2'});
    await page.emulateMedia('print');
    await page.pdf({path: 'hn.pdf', format: 'A4', printBackground: true});
    await browser.close();
})();

Answer 1

documentation for PDF print puppeteer 列出了一些可能的选项。其中还有printBackground :

<boolean> Print background graphics. Defaults to false.

尝试将其设置为 true在您的 PDF 导出中包含背景图形和颜色。