您的位置：首页 > Web前端 > HTML

【转】html 页面打印并分页

2012-10-29 12:55 302 查看

主要实现是PageNext样式，即：page-break-after: always;

此样式加在需要在之后分布的元素上

<html>
<head>
<title>***XXX市眼病防治中心XX病人结帐费用报表***</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<!--media=print 这个属性可以在打印时有效-->
<style media="print">
.Noprint
{
display: none;
}
.PageNext
{
page-break-after: always;
}
</style>
<style>
body, td, th
{
font-size: 12px;
}
.tdp
{
border-bottom: 1 solid #000000;
border-left: 1 solid #000000;
border-right: 0 solid #ffffff;
border-top: 0 solid #ffffff;
}
.tabp
{
border-color: #000000;
border-collapse: collapse;
}
.NOPRINT
{
font-family: "宋体";
font-size: 12px;
}
</style>
<script language="javascript">
　　        var i = 0;
function zoomL() {
i++;
document.getElementById("f").style.zoom = 1 + i / 3;
}
function zoomS() {
i--;
document.getElementById("f").style.zoom = 1 + i / 3;
}
</script>
</head>
<body>
<object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0"
width="0" viewastext />
<input type="button" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)" class="NOPRINT">
<input type="button" value="直接打印" onclick="document.all.WebBrowser.ExecWB(6,6)" class="NOPRINT">
<input type="button" value="页面设置" onclick="document.all.WebBrowser.ExecWB(8,1)" class="NOPRINT">
<input type="button" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7,1)" class="NOPRINT">
<input type="button" value="放大" onclick="zoomL();" class="NOPRINT">
<input type="button" value="缩小" onclick="zoomS();" class="NOPRINT">
<br />
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="center">
<td colspan="5">
<font size="3">XXX市眼病防治中心XX病人结帐费用报表***（1） </font>
</td>
</tr>
<tr>
<td>
汇总人次 5
</td>
<td>
费用合计 15853.12
</td>
<td>
统计日期
</td>
<td>
制表人 023
</td>
<td>
制表日期：2004-05-13
</td>
</tr>
</table>
<table width="90%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000"
class="tabp" id="f">
<tr>
<td>
姓名
</td>
<td>
住院号
</td>
<td>
科室
</td>
<td>
结帐日期
</td>
<td>
出院日期
</td>
<td>
费用合计
</td>
<td>
医保交易费用
</td>
<td>
分类给付费用
</td>
<td>
非医保交易费
</td>
</tr>
<tr>
<td>
王博
</td>
<td>
1001
</td>
<td>
1985-12-27
</td>
<td>
1999-9-9
</td>
<td>
22222222
</td>
<td>
aaa
</td>
<td>
fffffff
</td>
<td>
 
</td>
<td>
ooooooooo
</td>
</tr>
</table>
<hr align="center" width="90%" size="1" noshade class="NOPRINT">
<!--分页-->
<div class="PageNext">
</div>
<table width="90%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000"
class="tabp">
<tr>
<td>
第2页
</td>
</tr>
<tr>
<td>
看到分页了吧
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%">
这样的报表 对一般的要求就够了。
</td>
<td>
 
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="780%" border="1" class="Noprint">
<tr>
<td>
能不能打印
</td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

【转】html 页面打印并 分页

【转】html 页面打印并分页