4

(Note, even though this mention Pyppeteer, the Python version of Puppeteer, the code is exactly the same and works with either Puppeteer and Pyppeeteer).

Hi,

I'm converting the page http://getemoji.com/ into PDF using the following code :

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())

And it generates properly the following image: enter image description here

But if I try to convert the page into PDF, like this:

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

All the emoticons are greyed in the resulting PDF, like this:

enter image description here

The issue is not a font issue with the emoji, since they work perfectly on the screenshot. It's something related to how the PDF is generated, but I can't find out why.

I'm hoping you'll find it :)

EJoshuaS - Stand with Ukraine
  • 11,977
  • 56
  • 49
  • 78
Cyril N.
  • 38,875
  • 36
  • 142
  • 243
  • I wonder if there isn't a rule in CSS maybe, that says "keep the style when printing" specifically for the emoji ? – Cyril N. Nov 18 '20 at 11:21

1 Answers1

2

I came across the same issue and did some searching. The issue seems to be twofold.

  1. As you guessed, it is to do with the CSS rules for media printing. The site uses a bootstrap css file which has following rules:
    @media print {
        * {
            color: #000!important;
            text-shadow: none!important;
            background: 0 0!important;
            box-shadow: none!important
        }
        ...
    }

which gives a blanket rule for foreground color of all content to be black when printing it.

Fortunately, Pyppeteer provides an API to define the media type to be used for printing the content: page.emulateMedia which if provided the 'screen' argument would ignore the media print rules. If you use this, you would see that some of the content now has colors, the links look better too.

  1. The second issue seems to be the way Chrome prints a pdf. Pyppeteer actually uses the 'Print to PDF' functionality as provided by Chrome. So, the issue is not really with Pyppeteer.

To confirm this, I created a simple webpage which had some emojis and did not have any media printing css. When I manually open the page in Chrome and save it as a PDF, the emojis appear in black.

yeniv
  • 1,589
  • 11
  • 25
  • FWIW, I also found a [similar issue reported at Puppeteer](https://github.com/puppeteer/puppeteer/issues/4252) which suggests that the issue is with Chrome/Chromium. – yeniv Nov 24 '20 at 08:22
  • I'm not sure to understand your part about the "second issue", there isn't a second issue? – Cyril N. Nov 24 '20 at 09:43
  • I Agree; the "second issue" is not really part of the problem you posted. Assuming someone would stumble upon this post while trying to convert a page with emojis to PDF, I thought of adding that while they can get past the print CSS rules (if applicable to their webpage), they are likely to hit the "second issue". – yeniv Nov 24 '20 at 09:59