Question

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

这是我的环境：

木偶版本：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时，flipbook-viewport和flipbook的规则可以正常工作。但是右-01和图像无效。

但是有趣的是，当我以相同的规则使用@media屏幕（也将page.emulateMedia更改为screen）时，它们都工作正常。所以我认为木偶戏可能会有问题。

预期结果是什么？ good.pdf

会发生什么呢？ wrong.pdf

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

我的木偶代码示例：

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

对我来说，我在 stackoverflow 上找到的所有解决方案都没有奏效，我几乎“失去了希望”。但是在处理了所有信息之后，我发现你只需要两件事：

printBackground 选项必须设置为 TRUE，例如： page.pdf({ path: "./my.pdf", printBackground: true });
添加到您的背景或颜色值 !important，例如：

p {
  color: red !important; 
  background: blue !important; 
}

就是这样。

附言我目前有 Puppeteer v5.5.0。

Answer 2

操纵up的documentation for PDF print列出了一些可能的选项。其中printBackground：

<boolean>打印背景图形。默认为false。

尝试将其设置为true，以将背景图形和-colors包含到PDF导出中。

Answer 3

puppeteer只是一个用于驱动Chrome / Chromium的库，因此，如果在使用它时出现任何问题，我们最好的选择是使用puppeteer.launch({headless:false})打开Chromium并在那里进行调试。（但是，现在在headful模式下不支持打印为PDF，因此我们可能只使用完整的浏览器）

Chrome here's how to turn it on内置了对调试打印模式的内置支持。

已启用此功能，重新加载页面后，在“网络”标签中看到一个404：找不到background image。发生这种情况的原因是，当您从样式表中将@media print 移出到主页中时，相对链接../image/content/20181206picture1.png断开了（之前它是相对于样式表位置的，而现在是相对于样式表位置的。页面位置）。

因此，在修复了此链接here's the resulting pdf之后，我认为这是正确的。但是无法评论宽度/高度，您的样式表中可能会有其他影响。

Answer 4

据我所知，Puppeteer使用机器的屏幕尺寸来确定宽度和高度，以首先生成页面，然后将该页面打印为PDF，因此当background-size: 100%为使用。

Ý您可以显式地传递尺寸：

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }
}

在您的body中，在纸张尺寸尺寸中添加尺寸，这样它们就不会从系统中导出：

background-size: 21cm 29.7cm;

然后传递preferCSSPageSize和printBackground标志：

const pdf = await page.pdf({
    preferCSSPageSize: true,
    printBackground: true
});

当您的format: 'A4'具有尺寸时，似乎@page充其量也无济于事，最坏的情况是它可能覆盖了部分CSS，因此我将其完全省略。

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

4 个答案: