删除多页打印中的 Chrome 页眉和页脚答案

【问题标题】：Remove Chrome header and footer in prints, with multiple pages删除多页打印中的 Chrome 页眉和页脚
【发布时间】：2022-09-23 07:30:30
【问题描述】：

我们有需要使用嵌入在 PowerBuilder 应用程序中的 Chromium 打印的多页 HTML 文档（实际上保存为 PDF）。这些文件是慈善捐赠的税收收据，因此不应该有页眉和页脚，这对捐赠者来说看起来很奇怪和不专业。

我发现了很多使用 CSS 和 @media 打印规则来消除页眉和页脚的解决方案（通过将 @page 边距设置为 0），并使用额外的 CSS 来恢复边距（将它们设置在正文上）但它们只当只有一个页面时工作！这些规则中正文的顶部和底部边距适用于第一页的顶部和最后一页的底部 - 但第一页的底部和第二页的顶部（等等）仍然有 0 的边距！那是不可接受的。

当然必须有一个很好的解决方案？

是的，你可以用 headless Chrome 做到这一点（事实上，我们是这样做）但我们在类似 Citrix 的环境（实际上是 Graphon）中运行它，并且由于某种原因，最近调用 Chrome 可执行文件刚刚停止工作（它挂起并且必须被杀死）！所以我们需要一个不同的解决方案来将 HTML 转换为 PDF，这似乎是我们最好的选择——只要我们能摆脱页眉和页脚。

任何解决方案 - 谢谢？

我建议您至少显示一张图片。
对不起，不，这些页眉和页脚是由 Chrome 在打印或保存到 PDF 时直接添加的，而不是由打印机驱动程序添加的。 Chrome UI 和它的无头命令行中有一个选项可以跳过添加它们，但我在嵌入式 Chromium 中找不到任何方法来这样做。

标签： css pdf-generation chromium

【解决方案1】：

  @page {
    size: atuo; /* auto is the initial value */
    margin: 24px;
    @top-left {
        content: normal;
    }
    @bottom-center { 
        content: element(footer);
    } 
  }

【讨论】：

请记住，Stack Overflow 不仅旨在解决眼前的问题，还可以帮助未来的读者找到类似问题的解决方案，这需要了解底层代码。这对于我们社区的初学者和不熟悉语法的成员来说尤其重要。鉴于，你能edit你的答案包括你在做什么的解释吗为什么你认为这是最好的方法？

【解决方案2】：

很长一段时间以来一直在努力寻找解决同一问题的方法，并且不想将默认页眉和页脚隐藏给用户。

我最终仍然没有使用边距和一张桌子。

Thead 和 tfoot 在所有页面上都重复，所以我在实际表格标题上方添加了一个额外的“隐藏”行，因为我没有使用页脚，所以为它做了一行。

设置高度并隐藏那些额外的行使其可以用作边距。

在 Chrome 中对其进行了测试，它对我的情况来说效果很好。

.hidden * {
  height: 5mm;
  /* visibility: hidden; */
  /* uncomment */
  background-color: red;
  /* delete */
  color: white;
  /* delete */
}

@media print {
  @page {
    margin-top: 0;
    margin-bottom: 0;
  }
  #datatable tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  #datatable td {
    page-break-inside: avoid;
    page-break-after: auto;
  }
}

<table id="datatable">
  <thead>
    <tr class="hidden">
      <td>thead hidden row</td>
    </tr>
    <tr>
      <th>Table header</th>
    </tr>
  </thead>
  <tfoot class="hidden">
    <tr>
      <td>tfoot hidden row</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
    </tr>
    <tr>
      <td>. . .</td>
    </tr>
  </tbody>
</table>

How it shows up in print preview in Chrome

试图在 thead 行内嵌套表格或 div 似乎会破坏某些东西，并且它根本不会显示它。

【讨论】：