【转】html 页面打印并 分页


 主要实现是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>
                &nbsp;
            </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>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="50%">
                            这样的报表 对一般的要求就够了。
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <table width="780%" border="1" class="Noprint">
        <tr>
            <td>
                能不能打印
            </td>
        </tr>
    </table>
</body>
</html>
posted @ 2012-10-29 12:55  第八颗流星  阅读(670)  评论(0编辑  收藏  举报