How to print an div with emoji "❤️" to pdf

Question

I'm write a app to print some texts to pdf, but when I put a emoji like ❤️😬 and I try to print this using window.print, the emojis lost format, lost colors.

why this happens? what can I do to print this div with the emojis?

Answer 1

1. Use @font-face to embed a font that contains emoji (I think that is quite rare, but this seems a contender: https://emojisymbols.com/ ).

2. Use @font-face to embed an icon font and wrap all emoji in spans that use that specific icon font.

3. Write javascript* that replaces all emoji with images just before you fire the print command, like this:

    onclick="replaceAllEmojiWithImages(); window.print();"

*The javascript function can be derived from: https://stackoverflow.com/a/64007175/2397550