博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
冷知识:web打印分页,支持浮动
阅读量:6785 次
发布时间:2019-06-26

本文共 2008 字,大约阅读时间需要 6 分钟。

需求说明

正常业务很少用到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
复制代码

此种方法可行

方法二

添加隐藏分割线

我是第一页1
我是第一页2
我是第一页3
分割线
我是第二页1
我是第二页2
我是第二页3
分割线
我是第三页1
我是第三页2
我是第三页3
分割线
我是第四页1
我是第四页2
我是第四页3
复制代码

以上两种方法打印出来都是四页

总结:废话比较多,简单的强制分页实现了,欢迎大家积极讨论

转载于:https://juejin.im/post/5b66a057e51d4519503b7a26

你可能感兴趣的文章
Position Independent Code (PIC) in shared libraries on x64
查看>>
CNBLOG上几位.NET大牛的博客地址(转)
查看>>
接口继承和实现继承的区别
查看>>
spring 的自建request请求
查看>>
数组的相关知识
查看>>
Python中的logger和handler到底是个什么鬼
查看>>
mysql之 openark-kit online ddl
查看>>
mydumper安装、原理介绍
查看>>
值类型和引用类型的详细讨论
查看>>
《ArcGIS Runtime SDK for Android开发笔记》——(12)、自定义方式加载Bundle格式缓存数据...
查看>>
mysql 查询当天、本周,本月,上一个月的数据
查看>>
构建和管理有效API市场的关键步骤
查看>>
B00003 C++标准库 std::bitset
查看>>
字符串最小表示法(1) 朴素算法
查看>>
oracle监听问题
查看>>
windows 数据类型转换为 dotnet 数据类型
查看>>
fork函数
查看>>
ROS语音交互——科大讯飞语音合成TTS(二)
查看>>
为什么要架构?当架构走火入魔时怎么办
查看>>
请说明Java中字符'\'的含义,有什么作用?
查看>>