认识打印重要的CSS属性：print-color-adjust

背景

在日常开发中特别是后台系统中，大概率会涉及到打印的需求。这个时候往往会痛苦的是对于页面UI的还原。在实际开发过程中，在唤起打印的预览界面与实际的网页展示效果大相径庭。就以自身遇到的一些问题为例：页面设置的元素的背景色、视频、音频在打印预览的界面会丢失样式。

如下一个简单的页面，页面展示效果如下：

当在唤起打印后，预览的效果如下：

其中文本的背景色、视频和音频区域会丢失，很明显这种不符合要求。

解决

CSS属性print-color-adjust：设置用户代理可以做什么，以优化该元素在输出设备上的外观。默认情况下，浏览器可以根据输出设备的类型和能力，对元素的外观进行任何必要和审慎的调整。

    print-color-adjust: economy; // 经济节省的。表示允许对元素进行它认为适当和谨慎的调整，以便为它被渲染的设备优化输出，在打印时，浏览器可能会选择不使用所有的背景图像，并调整文本颜色，以确保对比度最适合在白纸上阅读，作为默认情况
    print-color-adjust: exact; //准确。该元素的内容是经过特别精心设计的，以重要的方式使用颜色、图像和样式

其兼容性见caniuse: print-color-adjust

在打印时候增加print-color-adjust: exact使浏览器不会丢失掉默认设置的样式

// 示例代码，可针对性调整
@media print{
  *{
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

最终效果：

总结

虽然print-color-adjust属性属于比较小众的属性，但是有时候确实能起到相当关键的作用（ps:笔者就耗费不少的时间排查其他原因，最终才发现找到该CSS属性。）