前端打印模拟器 `paper.css` 不适用于背景颜色

Question

我正在使用一个名为 paper.css 的解决方案来模拟使用这些 css 规则在 html 中排版的印刷文本。

我注意到当我使用 background-color 创建一个元素，然后使用我的 Chromium 打印菜单“另存为 PDF”时，背景颜色变成白色，就像整个页面一样。

如何将 html 文件打印成 pdf 并保持背景颜色？

基于项目存储库中 A4 example 的 MMW 是这样的：

<!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
    }
  </style>
</head>

<body class="A4">

  <!-- Each sheet element should have the class "sheet" -->
  <!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
  <section class="sheet padding-10mm">

    <!-- Write HTML just like a web page -->
    <article style="background-color: red;">This is an A4 document.</article>

  </section>

</body>

</html>

与打印的 PDF 比较：

Answer 1

确保在 Chrome 打印对话框中选中 More settings > Options > Background graphics 选项。

前端打印模拟器 `paper.css` 不适用于背景颜色

Front end printing emulator `paper.css` not working with background color

html

css

printing

colors

background-color