• html 打印


    【转载,出处未知,】,红色内容已测试,其余未测试。
    在打印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">&nbsp;</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>

  • 相关阅读:
    Visual studio 2010 OpenGL配置
    OPENSTACK在RHEL7安装;admin创建虚拟机模板供demo使用
    hdu 1856 More is better
    AJAX基础知识点学习
    socket.io+angular.js+express.js做个聊天应用(三)
    Java中的继承
    00078_迭代器
    马尔可夫不等式与切比雪夫不等式
    特征值与特征向量
    人工智能数学参考---4、SVD矩阵分解 注意
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/2351080.html
Copyright © 2020-2023  润新知