问题描述
我正在处理一个任务，准备要在Chrome中打印的HTML文档（要求），该文档将包含未指定长度的未指定数量的文本元素。文档需要双面打印，而各元素之间不得相互混合。因此，每当文本跨过奇数页时，就需要多包含一个空白页。
到目前为止，我已经阅读了很多关于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）做的不一样-在这里进行@R_1000_6404@设置，但一次只进行一次，因此下一个div从偶数页开始，这对我来说是错误的。
带有一些lorem-ipsum测试数据的简单演示代码：https://codesandbox.io/s/inspiring-wing-rtwbn?file=/test.css
解决方法
您一定要记住，大多数浏览器均不正确支持page-break属性。检查caniuse报告。
另外，here是可能会帮助您的问题，它已经有了一些不错的答案。
在这里将主要建议与我自己的评论重复。可能是您可以混合使用它们。
数字1。（@Nils）
您可以尝试将每个报告包装在div中，然后使用jQuery之类的方法来计算div中的height，以确定其是否以奇数结尾页面。
如果它以奇数页结尾，则在您的div类中插入一个空的page-break-after，然后将其馈送到下一页。
很明显，这只有在您知道目标打印机上打印页面的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>
但是，您应该记住这不能完全解决问题，因为正如您所说的那样，文件
将包含未指定数量的未指定长度的文本元素。
但是，也许您可以尝试使用此解决方案。