页面效果:第一页第N页业务需求:1.网页点击打印时,打印渲染后的页面每个页面的头部必须有一个公司标志;2、分页的时候,某行的表格不能被打断(页面到达固定高度时必须自动分页);为了达到上述要求,过程可谓折腾。我第一次尝试我想在每一页的头部打印同样的东西。我想偷懒。借助浏览器的打印设置功能,发现不起作用。Google虽然也有设置页眉和页脚的功能,但是它有自己固定的格式,根本不能设置你想要的内容。谷歌做不到。我还是不放弃。只想用现成的东西来实现。所以我再次尝试了Firefox。不出意外,Firefox可以设置header和footer没用,加不了logo,那我得再试试IE(哼,还是不行,就不截图演示了)嗯,终于有点放弃了,还是自己动手吧,然后就是各种百度,找方法,看别人的代码。中间试过这个方法:https://codeday.me/bug/20170302/3239.html这个方法是我当时能找到的,我觉得是最需要的方法,但是有一个不能容忍的缺点,打印渲染的时候,每页的页眉都会和内容重叠,这显然是不能接受的!所以最后还是要重新研究其他的方法:最终实现目标的思路是:1.首先在布局页面的时候,获取每行表格内容的高度之和加上其他固定部分的高度。如果超过一定高度(这个高度大致等于打印时页面的高度)然后添加你想要的headerhtml结构2.当达到这个高度时,让打印的页面自动分页,这个可以通过page-break-before的css属性:始终html结构:css样式:js部分:
