前端打印模拟工具paper.css设置background-color导出PDF不生效问题

方法1：调整浏览器打印设置（临时生效） #

打开打印菜单后，展开「更多设置」，找到背景图形选项，勾选该选项后再导出PDF，即可保留所有元素设置的背景色、背景图效果。

方法2：添加CSS规则（永久生效，无需每次调整设置） #

在你的样式中添加打印媒体查询规则，强制浏览器打印时保留自定义颜色：

@media print {
  * {
    -webkit-print-color-adjust: exact; /* 兼容Chromium系浏览器 */
    print-color-adjust: exact; /* 标准属性，兼容其他现代浏览器 */
  }
}

修改后的完整可运行代码如下：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
  <style>
    @page {
      size: A4
    }
    @media print {
      * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    }
  </style>
</head>
<body class="A4">
  <section class="sheet padding-10mm">
    <article style="background-color: red;">This is an A4 document.</article>
  </section>
</body>
</html>

排查建议 #

如果修改后仍然不生效，可以检查是否有其他优先级更高的CSS规则在打印媒体查询中覆盖了你设置的background-color属性，或者paper.css自带的规则是否存在打印场景下的背景色重置逻辑。

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