在第二页和后续页面上打印时缺少 div 的 CSS 背景颜色

问题描述

我正在尝试创建一个 HTML 页面，其中包含一个 <div> 和一个在打印时显示的 background-color。这可以通过在 -webkit-print-color-adjust: exact 的 CSS 样式中使用 div 来实现，但仅限于一点。

如果 div 跨越多个页面，则只有第一页显示背景颜色，其余页面显示白色背景。 Chrome、Safari 和 Edge 就是这种情况，而 Firefox 甚至不会在第一页上显示它（整个页面只有白色背景）。

为什么这很重要：我有一个自动化流程，使用无头 Chrome 浏览器 + Puppeteer 将 HTML 转换为 PDF 中的格式化和对齐的文本，然后将其叠加在不同的 PDF 模板文档，用于生成报告。 PDF 模板的背景是彩色的，因此当我将文本嵌入其中时，我不希望出现白色矩形。

这是重现问题的最小测试用例。（奇数边距和填充是为了使文本块大小合适，以便在转换为 PDF 后叠加在模板上。）

<html>
<head>
    <style>

@media print { 
  @page {size: A4 portrait; margin: 144pt 72pt 252pt;} 
  .content {
    padding-top: 186pt; 
    height: 260pt; 
    background-color: #fffaec; 
    -webkit-print-color-adjust: exact; 
  }
}
</style>
</head>
<body>
    
    <div class="content">
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p> 
    </div>
    
</body>
</html>

有什么技巧建议可以让背景颜色显示在第 2 页以上的页面上吗？或者这只是不得不忍受对 CSS 打印样式的糟糕支持的一种情况？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

background-color html printing-web-page