[英]Any way to do page breaks with javascript (print media)?
Browser support for page-break-inside: avoid
is poor. 浏览器对
page-break-inside: avoid
支持page-break-inside: avoid
不佳。 There are lots of scenarios where it's not applied. 在很多情况下,都没有应用它。 In my case it's a nested flexbox with
flex-wrap
. 在我的情况下,这是一个带有
flex-wrap
的嵌套flexbox。
Is there any way to add a page break using javascript? 有没有办法使用JavaScript添加分页符?
I can detect if the browser is in print mode with onbeforeprint
event in FF, or window.watchMedia
on Chrome, but what next? 我可以通过FF中的
onbeforeprint
事件或Chrome中的window.watchMedia
来检测浏览器是否处于打印模式,但是接下来该怎么办?
I guess I need to find out what's the printed page size in pixels, so I can determine the position where to insert the page break. 我想我需要找出打印的页面大小(以像素为单位),以便确定插入分页符的位置。 But
window.screen.availHeight
returns the same value and window.print.availHeight
does not exist :( 但是
window.screen.availHeight
返回相同的值,而window.print.availHeight
不存在:(
Assuming this is possible somehow, how do I do the page break then? 假设以某种方式可行,那么我该如何分页?
You can try a calculation, A4 has a certain proportion between width and height, so simply said if your print css makes the html/body 900px width. 您可以尝试计算,A4在宽度和高度之间有一定比例,因此简单地说,如果您的打印CSS使html / body的宽度为900px。 The height for each print page can be calculated by using the A4 proportions.
可以使用A4比例计算每个打印页面的高度。
So you can add a print css file that changes the layout so that the content that needs to be on the next page has a margin top. 因此,您可以添加一个可更改布局的打印css文件,以便需要在下一页上显示的内容具有页边距。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.