• 【转】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>
  • 相关阅读:
    normalize.css的使用
    从零开始优雅的使用mongodb实例
    如何使用Bootstrap自带图标
    WordPress主题开发:通过page的ID或者别名获取内容
    WordPress主题开发:输出指定页面导航
    WordPress主题开发实例:获取当前分类的文章列表
    WordPress主题开发实例:利用侧边栏工具显示联系方式
    WordPress主题开发实例:显示最新发表文章
    打印方法调用者的信息(方法反向追踪)
    从此爱上iOS Autolayout
  • 原文地址:https://www.cnblogs.com/meteortent/p/2744555.html
Copyright © 2020-2023  润新知