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

原文 标签 puppeteer

当我使用 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();
})();

最佳答案

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

<boolean> Print background graphics. Defaults to false.



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

关于当我使用@media print 时,Puppeteer 忽略了一些 CSS 规则来打印 PDF,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54035306/

相关文章:

c# - Puppeteer-Sharp 库没有工作,也没有在 Web 服务(wcf)项目中创建页面

node.js - 在Ubuntu Server上 puppeteer/ Chrome 失败

javascript - 如何使用 Puppeteer 选择具有相同类的所有子 div?

javascript - 未处理的PromiseRejectionWarning : Error: Protocol error (Runtime. callFunctionOn) : Target closed. (Puppeteer)

javascript - Node js内部文本的结果

node.js - 如何让 puppeteer 操纵者不被发现?

javascript - 如何使用Puppeteer库返回值以抓取动态网页?

javascript - 如何在puppeteer中使用querySelector将特定元素获取到<dl>

ubuntu - 如何在服务器中运行 headful puppeteer?

node.js - 无法让 Puppeteer 工作和安装