zoukankan      html  css  js  c++  java
  • firefox和chrome实现页面打印自动分页

      在Firefox和chrome中直接调用打印功能的js方法是

        

    window.print();

    但是如果页面很长,那么就需要分页,这时只需要在页面中添加css属性即可,如果想自动分页,则如下所示

    <style type="text/css" media="print">
        div {
              page-break-after:auto;
              page-break-inside:auto;
              page-break-before:auto;
         }
    </style>

    这里的三个属性可以根据需要添加。

    需要注意的是,在Firefox和chrome中,如果想实现打印可以自动分页,不要使用table来组织页面,两个浏览器对于用table组织的页面没有很好的支持自动分页,需要使用div,如果有表格,可以把表格包含在div中,也会自动分页打印。

    如果没有可以添加css,例如

    <style type="text/css" media="print">
        table {
              page-break-after:auto;
              page-break-inside:auto;
              page-break-before:auto;
         }
        tr {
              page-break-after:auto;
              page-break-inside:auto;
              page-break-before:auto;
         }
    </style>

    最后,可以把需要打印的内容单独成立一页,添加上一个打印按钮使用css控制该按钮不会被打印出来:

    <style media="print">
    .Noprint {display:none;}
    </style>
    
    
    <table id="printCtrl" class="Noprint">
         <tbody>
             <tr>
                <td align="center">
                     <input id="printBtn" type="button" onclick="print()" value="打印">
                     <br>
                      <hr align="center" width="90%"  size="1"  noshade="">
                </td>
             </tr>
         </tbody>
    </table>

    后面可以添加上需要打印的内容即可  

  • 相关阅读:
    【设置图片主体部分居中】
    高效数据查询设计思想
    SpringBoot中的classpath
    mysql优化口诀
    windows安装kafka
    windows安装rabbitmq
    使用Charles在移动端抓包
    07 哨兵机制:主库挂了,如何不间断服务
    操作系统(一)操作系统历史:从标准函数库到云计算
    06 数据同步:主从库如何实现数据一致
  • 原文地址:https://www.cnblogs.com/hongxf1990/p/4506660.html
Copyright © 2011-2022 走看看