CSS 分页后在 Chrome 中有偶数页

Question

我正在处理一项任务，准备 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

Answer 1

您一定要记住，大多数浏览器不正确支持 page-break 属性。查看 caniuse 报告。

此外，here 是可能对您有帮助的问题，它已经有一些很好的答案。

用我自己的评论复制这里的主要建议。也许，您可以混合使用它们中的每一个。

1 号。(@Nils)

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

如果它在奇数页结束，然后用你的 page-break-after class 插入一个空的 div 以便它进入下一页。

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

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

您需要在此处对标准打印机设置进行一些试验，以了解哪些适用于 you/your 客户端。如果有多个场景，你可以让他们 select 来自 drop-down.

所以你会使用 jquery 检查 div 的像素高度，对照页面的像素高度检查它，看看 div 是否以奇数结尾或偶数页 - 如果报告在奇数页结束，则插入分页符。

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

2号。(@spekary)

在需要的地方使用手册的内联样式page-breaking。

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

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

will contain unspecified number of text elements of unspecified length.

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

CSS 分页后在 Chrome 中有偶数页

CSS page-break-after to have even pages in Chrome

css

printing

printing-web-page

1 号。(@Nils)

2号。(@spekary)