博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端如何让网页打印时每一页都有固定的头部,且在达到固定高度时自动分页...
阅读量:7111 次
发布时间:2019-06-28

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

页面效果:

第一页

clipboard.png

第N页

clipboard.png

业务需求:

1.网页点击打印时,打印渲染的页面每一页的头部都要有公司logo;

2.而且分页时不能让某一行的表格断开(必须在达到固定高度时让页面自动分页);

为了实现上述需求,过程可谓心塞我首先尝试着让每一页的头部都能打印出相同的东西,本来想偷个懒,借助浏览器自带的打印设置功能,却发现行不通行不通谷歌虽然也有设置页眉页脚的功能,但是它有自己固定的格式,根本设置不了自己想要的内容

页眉

clipboard.png

页脚

clipboard.png

谷歌不行,我还是不死心,就是想用现成的东西来实现,所以呢我又去尝试火狐,惊喜不,火狐可以设置页眉页脚,然而并没有什么*用,又加不进去logo,然后呢我肯定又去试了一下IE(哼哼,还是不行,我就不截图演示了)

clipboard.png

好吧,我终于有一点点死心了,还是我自己来搞吧,接着就是各种百度,找方法,看别人的代码。中间尝试过这种方法:https://codeday.me/bug/20170302/3239.html

clipboard.png

clipboard.png

这种方法是我当时能找到的我觉得最需求的方法,但是它有一个让人无法容忍的缺点,

打印渲染时,每一页的头部会和内容重合在一起,这显然是不行的!

所以最后还是得重新研究其他方法:

最后达成目的的思路是:
1.首先在页面布局的时候,去获取每一行表格内容的高度相加再加上其他固定部分的高度,
如果超过某个高度(这个高度大致等于打印时页面的高度)就添加你想要的头部html结构
2.在这个高度到达时,就让打印页面自动分页,这个可以通过
page-break-before:always这个css属性来实现

html结构:

clipboard.png

clipboard.png

clipboard.png

css样式:

clipboard.png

clipboard.png

js部分:

clipboard.png

clipboard.png

转载地址:http://vpmhl.baihongyu.com/

你可能感兴趣的文章
SqlParameter的size属性
查看>>
了解 GNU GPL/GNU LGPL/BSD/MIT/Apache协议
查看>>
域控升级站点后EXCHANGE2007报错问题解决
查看>>
MySQL主从复制架构
查看>>
linux /etc/init.d/functions详解
查看>>
Cocos2dx学习笔记(2) string char* int类型数据转换
查看>>
我的友情链接
查看>>
python 数据结构 tree 的插入和遍历
查看>>
Linux学习时遇到的问题5
查看>>
虚拟桌面发展的下一个里程碑,构建在CWC之上的软件定义工作空间
查看>>
Map,Map.Entry<K,V>源码分析
查看>>
看<连城诀>有感
查看>>
VTK隐函数之vtkPlane
查看>>
3、Juniper SSG550M STATUS状态灯呈红色(内存条问题)
查看>>
Docker学习——三大组件【镜像、容器、仓库】的应用(二)
查看>>
mysql原理详解及部署
查看>>
taokeeper 架设与部署
查看>>
IIS配置Sencha touch
查看>>
elasticsearch文档-analysis
查看>>
拦截请求返回值的方法
查看>>