有什么方法可以用 javascript（印刷媒体）进行分页吗？

Question

浏览器对page-break-inside: avoid 的支持很差。有很多场景没有应用。在我的例子中，它是一个带有flex-wrap 的嵌套弹性框。

有没有办法使用javascript添加分页符？

我可以通过 FF 中的 onbeforeprint 事件或 Chrome 中的 window.watchMedia 来检测浏览器是否处于打印模式，但接下来呢？

我想我需要找出打印的页面大小（以像素为单位），以便确定插入分页符的位置。但是window.screen.availHeight 返回相同的值并且window.print.availHeight 不存在:(

假设这是可能的，那我该如何分页呢？

Answer 1

你可以试算一下，A4的宽高是有一定比例的，简单来说就是你的print css让html/body 900px宽。每个打印页面的高度可以使用 A4 比例计算。

因此您可以添加一个打印 css 文件来更改布局，以便需要在下一页上的内容具有顶部边距。