如何将带有❤️等emoji的div打印为PDF并保留emoji格式与色彩

问题产生原因 #

• 浏览器默认打印逻辑会主动剥离非文本类的彩色渲染属性，绝大多数彩色emoji属于基于字体的彩色矢量字形或浏览器内置的渲染样式，打印时会被自动转换为灰度单色轮廓
• 系统打印驱动、PDF导出工具的默认预设通常会关闭「打印背景图形/颜色」选项，emoji的色彩会被判定为非必要背景类样式被过滤
• 不同浏览器对emoji的打印适配存在差异，Chrome、Edge等主流浏览器默认会将彩色emoji转为单色文本样式，仅保留轮廓形态

解决方案 #

方案1：添加打印专用CSS强制保留色彩 #

在全局样式中添加打印媒体查询，强制浏览器打印时保留所有元素的原始色彩设置：

@media print {
  * {
    /* 兼容webkit内核浏览器 */
    -webkit-print-color-adjust: exact;
    /* 标准属性 */
    print-color-adjust: exact;
    /* 兼容旧版浏览器 */
    color-adjust: exact;
  }
}

添加该样式后即可直接保留emoji的原始彩色样式，无需额外调整代码逻辑，适配大部分主流浏览器场景。

方案2：将emoji转为图片渲染 #

如果CSS调整后仍存在兼容性问题，可以将文本中的emoji字符预先替换为对应PNG/SVG格式的emoji图片，设置和行内文本同高的尺寸，打印时图片的色彩不会被规则过滤，适配所有浏览器的打印场景。
参考替换逻辑如下：

// 匹配所有emoji字符的正则
const emojiReg = /(\p{Emoji_Presentation}|\p{Extended_Pictographic})/gu;
function replaceEmojiToImg(text) {
  return text.replace(emojiReg, (emoji) => {
    // 生成emoji对应unicode编码作为图片名
    const codePoint = [...emoji].map(item => item.codePointAt(0).toString(16)).join('-');
    return `<img src="./emoji-resource/${codePoint}.png" alt="${emoji}" style="height: 1em; display: inline-block; vertical-align: middle;" />`
  })
}

提前准备好对应编码的emoji图片资源即可。

方案3：引导用户开启打印配置项 #

如果是面向C端用户的产品，可以在触发打印前弹出轻量提示，引导用户在打印预览界面的「更多设置」分类下勾选「打印背景图形」选项，开启后即可正常显示彩色emoji。

内容的提问来源于stack exchange，提问作者cristianormoraes