CSS page-break-after 在 Chrome 中拥有偶数页面答案

【问题标题】：CSS page-break-after to have even pages in ChromeCSS page-break-after 在 Chrome 中拥有偶数页面
【发布时间】：2020-09-25 17:58:17
【问题描述】：

我正在处理一项准备 HTML 文档以在 Chrome 中打印的任务（要求），其中将包含未指定数量的未指定长度的文本元素。文件需要双面打印，而元素不得相互混合。因此，每当文本跨越奇数页时，就需要包含一个额外的空白页。

到目前为止，我已经阅读了很多关于 page-break-before 和 page-break-after CSS 元素的内容，它们应该可以满足我的需要。但是，它们似乎无法按照 Chrome 中的规范工作。我注意到这可能是众所周知的问题，但还没有找到合适的解决方法。

我创建了以下 CSS：

@media print {
  .block {
    font-family: Arial, Helvetica, sans-serif;
    page-break-after: right;
    display: block;
    float: none;
    position: relative;
  }
}

当我在 Edge (44.18362.449.0) 中尝试它时，它似乎正在插入我需要的空白页 - 测试输出有 17 页，第 6 页和第 12 页完全空白。但是我的 Chrome (85.0.4183.121) 并没有做同样的事情 - 这里是分页符，但一次只有一个，所以下一个 div 从偶数页开始，这对我来说是错误的。

带有一些 lorem-ipsum 测试数据的简单演示代码：https://codesandbox.io/s/inspiring-wing-rtwbn?file=/test.css

【问题讨论】：

标签： css printing printing-web-page

【解决方案1】：

您绝对应该记住，大多数浏览器不正确支持page-break 属性。查看caniuse 报告。

另外，here 这个问题可能会对您有所帮助，它已经有了一些很好的答案。

用我自己的评论复制这里的主要建议。可能是，您可以混合使用它们。

第 1 号。(@Nils)

您可以尝试将每个报告包装在 div 中，然后使用 jQuery 之类的东西来计算 div 的 height 以确定它是否以奇数页结尾。

如果它在一个奇怪的页面上结束，那么在你的page-break-after 类之后注入一个空的div，以便它进入下一页。

显然，这只有在您知道您的页面在目标打印机上打印的 dpi 时才会真正起作用。没有适用于所有场景的神奇答案。

72 dpi（网络）= 595 X 842 像素
300 dpi（打印）= 2480 X 3508 像素（“210mm X 297mm @ 300 dpi”）
600 dpi（打印）= 4960 X 7016 像素

您需要在此处使用标准打印机设置进行一些试验，以了解适合您/您的客户的设置。如果有多个场景，您可以让他们从下拉列表中进行选择。

因此，您将使用 jquery 检查 div 的像素高度，将其与页面的像素高度进行检查，以查看 div 是否以奇数页或偶数页结尾 - 然后注入分页符，如果报告以奇数页结束。

您还需要预先知道用户是否将使用双面打印 - 因为您只需要为双面打印执行此操作。

2号。(@spekary)

在需要的地方使用内联样式进行手动分页。

<div style="page-break-after: right">
    <!-- your content -->
</div>

但是，您应该记住，这并不能完全解决您的问题，因为正如您所说，文档

将包含未指定数量的未指定长度的文本元素。

不过，也许您可以尝试一下这个解决方案。

【讨论】：