今天小编给大家分享一下id是html的属性吗的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一
html 打印
顺晟科技
2022-09-15 20:38:38
179
【转载，出处未知，】，红色内容已测试，其余未测试。
在打印HTML页面时控制分页2011年12月22日 星期四 下午 9:31
打印分页功能:
page-break-after, page-break-before
根据资料上的说法,应该是这么用的:
<style type=“text/css“>
.pageEnd {page-break-after:always}
</style>
然后在需要强制分页的地方用:
<br class=“pageEnd“>
IE与FF的分页打印问题
前几天遇到个问题，不大，但很头痛，原因是一个HTML页面中的table太大了，打印出来自动分页显示。在IE中不会有问题，在FireFox中出现跨页部分的table丢失问题。
解决办法是在使用PAGE-BREAK-AFTER属性（强制分页），并应用<style media="print">（将style只应用于打印输出）。具体如下
....
<STYLE type="text/css">
.diss {display:none;}
</STYLE>
<style media="print">
.diss {display:block;height:1px;}
.PageEnd { PAGE-BREAK-AFTER: always;}
</style>
<!--如果是IE，覆盖掉，否则IE打印有问题-->
<!--[if IE]>
<style media="print">
.diss {display:none;}
.PageEnd {}
</style>
<![endif]-->
........
<body>
.....
<div id="testDiv" class="diss"><p class="PageEnd"> </p><br></div>
<table>
........
如何在打印HTML页面时 控制分页
最近在开发中碰到这个问题, 开始一直没想到合适的解决方法, 后来有人提醒用CSS试试. 马上去查资料,发现CSS中有这个功能:
page-break-after, page-break-before
根据资料上的说法,应该是这么用的:
<style type="text/css">
br.pageEnd {page-break-after:always}
</style>
然后在需要强制分页的地方用:
<br class="pageEnd">
在打印HTML页面时控制分页
1, 如果以<table>标签间隔，用<div style="page-break-after: always"></div>实现
2, 如果以<tr>间隔，在要分页的地方用<tr style="page-break-after: always">实现
不过我用第2种方法后，虽然可以分页，但第2页上面的第一个tr的上边框不显示，怪
CSS2 打印参考http://www.w3school.com.cn/css/css_ref_print.asp
有时候当我们需要把页面中一张太长的表格分成几页输出,并保证每一页的表格都能保留表头(或者包括表尾).也有时候我们需要控制表格中某一个包含内容比较多的行直接输出在下一页,以免这一行的内容被分割成两页.
在这种情况下,我们就需要用到CSS样式表来设置表格内行的style,从而达到我们想要的打印输出效果.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>分页打印</title>
</head>
<body>
<object id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0 ></object>
<table border="0" style="font-size:9pt;" width="300px" align="center">
<thead style="display:table-header-group; font-weight:bold">
<tr>
<td colspan="2" align="center" style="font-weight:bold; border:3px double red">
每页都有的表头
</td>
</tr>
</thead>
<tbody>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr style="page-break-after: always;">
<td>在这个之后分页</td>
<td>在这个之后分页</td>
</tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr>
<td>在这个之前分页</td>
<td>在这个之前分页</td>
</tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
<tr><td>表格内容</td><td>表格内容</td></tr>
</tbody>
<tfoot style="display:table-footer-group; font-weight:bold">
<tr>
<td colspan="2" align="center" style="font-weight:bold; border:3px double blue">
每页都有的表尾
</td>
</tr>
</tfoot>
</table>
<div align="center">
<input type="button" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7,1)" />
<input type="button" value="打 印" onclick="javascript:window.print()" />
</div>
</body>
</html>
相关文章
-
19
2022-10
-
19
2022-10
-
18
2022-10
-
02
2022-10
-
02
2022-10
-
02
2022-10
推荐阅读
随机推荐
- HTML的<canvas>标签作用
- h5离线缓存是什么？
- Web应用中富交互的撤销与前进操作的实现方法介绍
- HTML中embed什么意思？
- nav是什么标签
- utf-8编码原始代码与简化缩写
- 将html代码部署到阿里云服务器，并进行域名解析，以及在部署过程中遇到的问题和解决方法 - 南无淫荡*欢喜佛
- Spark入门实战系列--7.Spark Streaming（上）--实时流计算Spark Streaming原理介绍 http://www.cnblogs.com/shishanyuan/p/4747735.html
- Html学习之十三（导航栏的制作）
- [HTML5] Blob对象
- word模版另存为网页(*.htm,*.html),转为jsp页面并加入数据后导出成word
- JavaScript-填充JS的HTML表单值-堆栈溢出
- HTML-JavaScript旋转标题-堆栈溢出
- JavaScript-如何在设置React组件时插入HTML标记'；S动态内文本？-堆栈溢出
- Python-Flask如何访问login.HTML？-堆栈溢出
- Python-将变量放在双引号字符串中，但作为嵌套for循环中的函数参数-堆栈溢出
- HTML-如何缩放图像映射？-堆栈溢出
- html-使容器收缩以适应子元素的包装-堆栈溢出
- JavaScript-如何为UL创建动态类名？-堆栈溢出
- JavaScript-在重新访问表单页面堆栈溢出时禁用提交按钮