需求说明
正常业务很少用到web打印,而且web打印在网上大多数的资料都是通过表格打印,现在我一口气拿到了2000条数据,需要将这2000条数据整个放在web页面上打印的时候能够分页(要保证页面不溢出),最开始的思路是通过指定的demo高度来实现分页,但是数据量大了依旧会导致打印溢出(就是上一页的内容打印在了下一页),还有这个高度的点不好找(即使找到了,换了其他浏览器依然会溢出)
web页面强制分页打印:css的page-break-after属性
1、page-break-after属性简单介绍
浏览器支持
所有主要浏览器都支持page-break-after属性。 注意: 任何版本的Internet Explorer(包括IE8)支持属性值"left","right",和"inherit"。 注意: Firefox,Chrome和Safari不支持属性值"avoid","left"和"right"。PS:行内元素使用page-break-after属性无效,例如:span、input标签
2、实现div浮动也可以强制打印分页的心路历程
首先通过一个案例简单了解一下强制分页
我是第一页我是第二页我是第三页复制代码右键打印(我这里用的谷歌浏览器),可以看到有三页需要打印
现在有个需求,每个页面有3个内容,同时有三个div都带有浮动效果的div(没有为什么,就是有浮动)
我是第一页1我是第一页2我是第一页3我是第二页1我是第二页2我是第二页3我是第三页1我是第三页2我是第三页3复制代码我是第四页1我是第四页2我是第四页3
方法一
存在浮动就会导致强制分页无效,有人可能已经想到了:"那就在浮动外面在包层块级元素,给这个块级元素强制分页不就好了",光说不练假把式,效果如下
复制代码此种方法可行
方法二
添加隐藏分割线
我是第一页1我是第一页2我是第一页3我是第二页1我是第二页2我是第二页3我是第三页1我是第三页2我是第三页3复制代码我是第四页1我是第四页2我是第四页3
以上两种方法打印出来都是四页
总结:废话比较多,简单的强制分页实现了,欢迎大家积极讨论