摘要:页面效果第一页第页业务需求网页点击打印时,打印渲染的页面每一页的头部都要有公司而且分页时不能让某一行的表格断开必须在达到固定高度时让页面自动分页为了实现上述需求,过程可谓心塞我首先尝试着让每一页的头部都能打印出相同的东西,本来想偷个懒,借助
页面效果:
第一页
第N页
业务需求:1.网页点击打印时,打印渲染的页面每一页的头部都要有公司logo;
2.而且分页时不能让某一行的表格断开(必须在达到固定高度时让页面自动分页);
为了实现上述需求,过程可谓心塞 我首先尝试着让每一页的头部都能打印出相同的东西, 本来想偷个懒,借助浏览器自带的打印设置功能,却发现行不通行不通 谷歌虽然也有设置页眉页脚的功能,但是它有自己固定的格式,根本设置不了自己想要的内容
页眉
页脚
谷歌不行,我还是不死心,就是想用现成的东西来实现,所以呢 我又去尝试火狐,惊喜不,火狐可以设置页眉页脚,然而 并没有什么*用,又加不进去logo,然后呢 我肯定又去试了一下IE(哼哼,还是不行,我就不截图演示了)
好吧,我终于有一点点死心了,还是我自己来搞吧,接着就是各种百度,找方法,看别人的代码。 中间尝试过这种方法:https://codeday.me/bug/20170302/3239.html
这种方法是我当时能找到的我觉得最需求的方法,但是它有一个让人无法容忍的缺点,
打印渲染时,每一页的头部会和内容重合在一起,这显然是不行的!
所以最后还是得重新研究其他方法:
最后达成目的的思路是:
1.首先在页面布局的时候,去获取每一行表格内容的高度相加再加上其他固定部分的高度,
如果超过某个高度(这个高度大致等于打印时页面的高度)就添加你想要的头部html结构
2.在这个高度到达时,就让打印页面自动分页,这个可以通过
page-break-before:always这个css属性来实现
css样式:
js部分:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115720.html
摘要:页面效果第一页第页业务需求网页点击打印时,打印渲染的页面每一页的头部都要有公司而且分页时不能让某一行的表格断开必须在达到固定高度时让页面自动分页为了实现上述需求,过程可谓心塞我首先尝试着让每一页的头部都能打印出相同的东西,本来想偷个懒,借助 页面效果: 第一页 showImg(https://segmentfault.com/img/bV4kHH?w=554&h=794); 第N页 s...
摘要:合理的优化长列表,可以提升用户体验。这样保证了无论如何滚动,真实渲染出的节点只有可视区内的列表元素。具体效果如下图所示对于比无优化的情况,优化后的虚拟列表渲染速度提升很明显。是基于来实现的,但是是一个维的列表,而不是网状。 对于较长的列表,比如1000个数组的数据结构,如果想要同时渲染这1000个数据,生成相应的1000个原生dom,我们知道原生的dom元素是很复杂的,如果长列表...
摘要:合理的优化长列表,可以提升用户体验。这样保证了无论如何滚动,真实渲染出的节点只有可视区内的列表元素。具体效果如下图所示对于比无优化的情况,优化后的虚拟列表渲染速度提升很明显。是基于来实现的,但是是一个维的列表,而不是网状。 对于较长的列表,比如1000个数组的数据结构,如果想要同时渲染这1000个数据,生成相应的1000个原生dom,我们知道原生的dom元素是很复杂的,如果长列表...
阅读 2878·2019-08-30 15:55
阅读 1948·2019-08-30 14:02
阅读 1183·2019-08-29 15:23
阅读 977·2019-08-29 11:27
阅读 426·2019-08-26 11:43
阅读 3158·2019-08-26 10:32
阅读 1211·2019-08-23 14:41
阅读 3275·2019-08-23 14:41