使用printThis库无法获取元素background-color属性的问题与解决

问题场景 #

使用printThis库实现页面打印功能，页面内存在类名为.table-title的元素，CSS初始设置如下：

.table-title {
  color: #fff;
  background-color: #88B1C0;
}

调用printThis时仅传入importCSS: true参数（该参数默认会将页面的<style>标签复制到打印专用iframe中），但打印预览出现以下异常：

• 文本显示为黑色，而非设置的白色
• 元素背景色未生效，显示为默认白色

排查过程 #

尝试给文本颜色添加!important后，文本白色样式生效，但背景色依然无法正常显示。

最终解决方案 #

需同时完成两处修改：

1. 在@media print规则中，为body添加强制保留打印颜色的属性
2. 给.table-title的背景色样式添加!important

完整CSS代码示例：

.table-title {
  color: #fff !important;
  background-color: #88B1C0 !important;
}

@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact; /* 兼容非WebKit内核浏览器 */
  }
}

原理说明 #

• *-webkit-print-color-adjust: exact*（及标准属性*print-color-adjust: exact*）会强制浏览器在打印时保留元素的背景色与文本颜色，避免浏览器默认忽略背景色以节省墨水
• 为背景色添加!important是为了覆盖printThis生成的iframe中可能存在的默认样式优先级冲突

内容的提问来源于stack exchange，提问作者Julio Escudero Cuesta