4

（注意，尽管这里提到了 Pyppeteer，Puppeteer 的 Python 版本，但代码完全相同，并且可以与 Puppeteer 和 Pyppeeteer 一起使用）。

你好，

我正在使用以下代码将页面http://getemoji.com/转换为 PDF：

import asyncio
from pyppeteer import launch
from pyppeteer.launcher import connect


async def main():
    browser = await launch()
    context = await browser.createIncognitoBrowserContext()
    page = await context.newPage()
    page.on('dialog', lambda dialog: dialog.dismiss())
    # await page.emulateMedia('print')
    
    await page.goto('http://getemoji.com/')
    await page.screenshot({'path': 'example.png'})
    await context.close()
    await browser.disconnect()

asyncio.get_event_loop().run_until_complete(main())

它会正确生成以下图像： 在此处输入图像描述

但是，如果我尝试将页面转换为 PDF，如下所示：

    await page.pdf({
        'path': 'example.pdf',
        'format': 'A4'
    })

生成的 PDF 中的所有表情符号都是灰色的，如下所示：

在此处输入图像描述

问题不是表情符号的字体问题，因为它们在屏幕截图上完美运行。这与 PDF 的生成方式有关，但我不知道为什么。

我希望你能找到它:)

4

1 回答 1

2

我遇到了同样的问题并进行了一些搜索。这个问题似乎是双重的。

  1. 如您所料，这与媒体打印的 CSS 规则有关。该站点使用具有以下规则的引导 css 文件：
    @media print {
        * {
            color: #000!important;
            text-shadow: none!important;
            background: 0 0!important;
            box-shadow: none!important
        }
        ...
    }

它为所有内容的前景色在打印时为黑色提供了一个总括规则。

幸运的是，Pyppeteer 提供了一个 API 来定义用于打印内容的媒体类型：page.emulateMedia如果提供该'screen'参数将忽略媒体打印规则。如果你使用它，你会看到一些内容现在有了颜色，链接看起来也更好。

  1. 第二个问题似乎是 Chrome 打印 pdf 的方式。Pyppeteer 实际上使用 Chrome 提供的“打印到 PDF”功能。所以，问题不在于 Pyppeteer。

为了确认这一点，我创建了一个简单的网页，其中包含一些表情符号并且没有任何媒体打印 css。当我在 Chrome 中手动打开页面并将其另存为 PDF 时，表情符号显示为黑色。

于 2020-11-24T08:21:37.867 回答