冷知识：web打印分页，支持浮动

风说雨知道
6,085 阅读4分钟

需求说明

正常业务很少用到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浮动也可以强制打印分页的心路历程

首先通过一个案例简单了解一下强制分页

<div style="page-break-after:always;">我是第一页</div>
<div style="page-break-after:always;">我是第二页</div>
<div style="page-break-after:always;">我是第三页</div>

右键打印（我这里用的谷歌浏览器），可以看到有三页需要打印

现在有个需求,每个页面有3个内容，同时有三个div都带有浮动效果的div(没有为什么，就是有浮动)

 <div>
    <div style="float:left">我是第一页1</div>
    <div style="float:left">我是第一页2</div>
    <div style="float:left">我是第一页3</div>
 </div>
 <div>
    <div style="float:left">我是第二页1</div>
    <div style="float:left">我是第二页2</div>
    <div style="float:left">我是第二页3</div>
 </div>
 <div>
    <div style="float:left">我是第三页1</div>
    <div style="float:left">我是第三页2</div>
    <div style="float:left">我是第三页3</div>
 </div>
 <div>
   <div style="float:left">我是第四页1</div>
   <div style="float:left">我是第四页2</div>
   <div style="float:left">我是第四页3</div>
</div>
方法一

存在浮动就会导致强制分页无效，有人可能已经想到了："那就在浮动外面在包层块级元素,给这个块级元素强制分页不就好了"，光说不练假把式，效果如下

 <div style="page-break-after:always;overflow:hidden;">
    <div style="float: left;">我是第一页1</div>
    <div style="float: left;">我是第一页2</div>
    <div style="float: left;">我是第一页3</div>
 </div>
 <div style="page-break-after:always;overflow:hidden;">
    <div style="float: left;">我是第二页1</div>
    <div style="float: left;">我是第二页2</div>
    <div style="float: left;">我是第二页3</div>
 </div>
 <div style="page-break-after:always;overflow:hidden;">
    <div style="float: left;">我是第三页1</div>
    <div style="float: left;">我是第三页2</div>
    <div style="float: left;">我是第三页3</div>
 </div>
 <div style="page-break-after:always;overflow:hidden;">
   <div style="float: left;">我是第四页1</div>
   <div style="float: left;">我是第四页2</div>
   <div style="float: left;">我是第四页3</div>
</div>

此种方法可行

方法二

添加隐藏分割线

<div style="page-break-after:always">
   <div style="float: left;">我是第一页1</div>
   <div style="float: left;">我是第一页2</div>
   <div style="float: left;">我是第一页3</div>
</div>
<div style="visibility:hidden;">分割线</div>
<div style="page-break-after:always">
   <div style="float: left;">我是第二页1</div>
   <div style="float: left;">我是第二页2</div>
   <div style="float: left;">我是第二页3</div>
</div>
<div style="visibility:hidden;">分割线</div>
<div style="page-break-after:always">
   <div style="float: left;">我是第三页1</div>
   <div style="float: left;">我是第三页2</div>
   <div style="float: left;">我是第三页3</div>
</div>
<div style="visibility:hidden;">分割线</div>
<div style="page-break-after:always">
   <div style="float: left;">我是第四页1</div>
   <div style="float: left;">我是第四页2</div>
   <div style="float: left;">我是第四页3</div>
</div>

以上两种方法打印出来都是四页
总结：废话比较多，简单的强制分页实现了，欢迎大家积极讨论

avatar
文章
阅读
粉丝