有没有办法用javascript (印刷媒体)进行分页？

Question

浏览器对page-break-inside: avoid的支持很差。在很多情况下，它没有被应用。在我的例子中，它是一个嵌套了flex-wrap的flexbox。

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

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

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

假设这是可能的，那么我该怎么做分页呢？

Answer 1

你可以试着计算一下，A4在宽度和高度之间有一定的比例，所以简单地说，如果你的print css使html/body宽度达到900px。可以使用A4比例计算每个打印页的高度。

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