puppeteer - 表情符号在 Chrome Headless 的 PDF 输出中转换为灰色

Question

(请注意，尽管这里提到了 Puppeteer 的 Python 版本 Pyppeteer，但代码完全相同并且适用于 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 的生成方式有关，但我不知道为什么。
我希望你会找到它:)

Answer 1

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

正如您所猜测的，这与媒体打印的 CSS 规则有关。该网站使用 bootstrap css file其中有以下规则:

    @media print {
        * {
            color: #000!important;
            text-shadow: none!important;
            background: 0 0!important;
            box-shadow: none!important
        }
        ...
    }

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

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

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