ie中的html分页控制,用IE打印网页表格,实现自动分页、每页加表头
1. 建立表格样式表
.tabprint thead{
display:table-header-group;
}
.tabprint td{
border-right:1px solid black;
border-bottom:1px solid black;
}
.tabprint {
border-left:1px solid black;
/*border-top:1px solid black;*/
}
.tp_border_top td{
BORDER-TOP: black 1px solid;
BORDER-RIGHT: black 1px solid; BORDER-BOTTOM: black 1px solid;
}
第2步: .添加分页函数
//分页打印函数
function tabprintpage(ptabid){
var srctab = document.getElementById(ptabid);
for(var i=0;i
var tr=srctab.rows[i];
for(var j=0;j
if(tr.cells[j].innerText.replace(/ /g,"") == ""){
tr.cells[j].innerText = " "; //这里给空单元格填充一个空格,否则表格线画不出来
}
}
}
var MAX_PAGE_HEIGHT = 720; //一页的高度,单位是象素,此处需要配置(不是恒定的值,与计算机单位象素的绝对长度有关,而不同计算机该值是不同的)
var page = 1;
var srctab = document.getElementById(ptabid);
var ohead = srctab.rows[0].getBoundingClientRect();
var tab_head_height = ohead.bottom - ohead.top; //计算表头高度
var prev_page_bottom = 0; //上一页的页尾位置
for(var i=1;i
var obj = srctab.rows[i];
var oRect = obj.getBoundingClientRect();
var top = oRect.top;
var btm = oRect.bottom;
//if(page!=1){ //不是第一页时要减去表头高度
// var top = oRect.top - tab_head_height;
// var btm = oRect.bottom - tab_head_height;
//}
var page_height = MAX_PAGE_HEIGHT;
if(page!=1){
page_height = page_height - tab_head_height; //只有第一页的页高要保留表头高度,其它页的页高要减表头高度
}
var mt = (top - prev_page_bottom) % page_height;
var mb = (btm - prev_page_bottom) % page_height;
/** 如果分页点落在行的起点,则在行前分页,行落在下一页 **/
if(mt==0 && top != 0 && top != prev_page_bottom){ //当在上一行的行尾分页时,下一行的行头也会满足mt==0,所以需要判断 top != prev_page_bottom
srctab.rows[i].style.pageBreakBefore="always";
prev_page_bottom = oRect.top;
page++;
continue;
}
/** 如果分页点落在行的终点,则在行后分页,行落在当前页 **/
else if(mb == 0){
srctab.rows[i].style.pageBreakAfter="always";
prev_page_bottom = oRect.bottom;
page++;
continue;
}
var rt = (top - prev_page_bottom - mt) / page_height
var rb = (btm - prev_page_bottom - mb) / page_height
if(rt != rb){ /* 如果行起点与行终点不在同一页,则在行前分页,行落在下一页 */
//alert(i + " " + page + " " + prev_page_bottom + " " + oRect.top + " " + oRect.bottom)
srctab.rows[i].style.pageBreakBefore="always";
prev_page_bottom = oRect.top;
//alert(top);
//alert(btm);
page++;
continue;
}
}
srctab.style.visibility = "visible";
}
3.建立表格
车型百公里系数百公里实际里程(km)百公里考核用油(升)吨公里考核用油(升)总考核用油(升)油卡加油量(升)
...........
3.表格标记的属性样式必须按上面提供的定义,不能更改, 否则效果会变化 4.表格必须有 标记,当有多表头时,该标记可以包含多行, 5.表头第一行 标记要有 tp_border_top 样式 .
ie中的html分页控制,用IE打印网页表格,实现自动分页、每页加表头相关推荐
- 在html中怎么设置页面边距,在打印网页时怎么设置调整页边距
在打印网页时怎么设置调整页边距 今天给大家介绍一下在打印网页时怎么设置调整页边距的具体操作步骤. 1. 首先打开电脑,找到想要打印的网页打开. 2. 点打开之后,在页面右上角点击三横图标. 3. 在弹 ...
- html表格打印填充分页,window.print()页面打印之表格内容分页填充进行分页打印
windwow.print()用于打印当前窗口的内容,很简便,可当内容特殊并且打印有特殊需求的时候就要绕个圈了.下面是需要打印的表格: 当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出 ...
- ie中的html分页控制,IE中HTML打印时实现每页都有的表头和打印分页
/p> Transitional//EN"> 无标题文档 @media print{ INPUT {display:none} } width="300px" ...
- antd中如何实现分页勾选记住之前的选项
antd的表格中勾选状态的控制 的基本逻辑是通过表格属性的rowSelection的selectedRowKeys来实现的.它是一个数组.记录了所有勾选项的字段(常见的比如id) const rowS ...
- 在Delphi中很精确地控制生成的WORD文档的格式
原文地址:http://blog.163.com/laidedou@126/blog/static/1150740632012036110729/ var WordApplication1: T ...
- 解决360浏览器或者IE等浏览器使用element 中的el-pagination分页点击有黑框问题
问题描述 在使用element 中的el-pagination分页组件时,其他个别浏览器点击分页时会出现黑色边框的样式问题 解决方案: 审查元素找到选择的按钮类名然后控制其鼠标事件的样式 :deep( ...
- rowbounds分页oracle,Oracle使用MyBatis中RowBounds实现分页查询功能
Oracle中分页查询因为存在伪列rownum,sql语句写起来较为复杂,现在介绍一种通过使用MyBatis中的RowBounds进行分页查询,非常方便. 使用MyBatis中的RowBounds进行 ...
- WPF中对三维模型的控制
原文:WPF中对三维模型的控制 (以下选自南开大学出版社出版的<WPF和Silverlight教程>) 3Dmax中的建模模型可以导出为obj文件格式,将此文件导入WPF项目中,由WPF完 ...
- C语言中控制printf的打印颜色实例及vt100的控制符
C语言中控制printf的打印颜色实例及vt100的控制符文档 收藏 转自:http://blog.csdn.net/evimacsl/archive/2010/01/18/5206836.aspx ...
最新文章
- auuc 评估指标_广告中增益模型理解
- 全局替换字体,开源库更方便!!!
- 如何使用Dev C++调试(debug)c程序
- BeetleX之HTTP网关部署
- java web应用开发渐进教程_Java Web应用开发渐进教程
- linux下文件时间戳
- Nacos教程_3 整合SpringCloud(配置中心+服务发现)
- echarts实现3D饼图
- steam无法连接至计算机,无法连接至steam网络怎么办 无法连接至steam网络解决方法【图文】...
- 引爆点---绝对内行
- 通过分析周榜前100名专家的博客文章 手把手教你写出爆款文章
- MFC程序的剖析及生死因果揭秘
- 2007年大学生电子设计大赛国赛电源类题目设计报告
- Go语言Web项目搭建
- JSX语法使用详解——终极版
- 【JVM学习笔记】垃圾回收基础篇
- 判断平年还是闰年,一个月有多少天,一年的第几天
- 德州扑克实践之二------判断牌型
- html 无缝轮播图完整代码
- HashMap的原理以及关于put方法的介绍
热门文章
- java dtu 采集程序_一文教你用DTU主动采集,省去PLC、单片机、RTU等,节约成本
- 魅族16支持html吗,魅族 16可以无线充电吗?
- 乌德勒支大学计算机研究生学费,乌德勒支艺术学院
- Adobe Acrobat 导出注释遇到的问题
- android换皮肤思路总结
- mac系统mysqld进程无法kill掉的问题
- 响应式图片的实现(含picture标签、srcset属性、sizes属性的使用方法,设备像素比详解)
- JAVA毕设项目至臻阁古董拍卖网(java+VUE+Mybatis+Maven+Mysql)
- 手机圈:中兴Axon 30素皮至臻版正式上市,512G售价3498元!
- 边缘计算产业链详解 | 内含赠书福利