zoukankan      html  css  js  c++  java
  • js:打印页面且自定义页眉页脚

    1,下载jqprint.js,如果报错,可能是jquery的版本太低了。

      解决:1,更换jquery

         2,或者引入 jquery-migrate.min.js

    <input type="button" id="printtest" value="打印" onclick="printtest()">
    <div id="printcontent">
            
        <div>test</div>    
        <div>test</div>
        <div>test</div>
    
    </div>

    <script>
      function printtest(){
      $('#printcontent').jqprint()
    }

    </script>  

    实际上jqprint.js,还是调用window.print()

    2,自定义页眉页脚

    <input type="button" id="printtest" value="打印" onclick="printtest()">
    <div id="printcontent">
         <div class='header-test'>页眉</div>
         <div class='footer-test'>页脚</div>
         <table>
            <thead>
    <tr><td><div class='header'></div><td></tr> </thead> <tbody> <tr><td> <div>test</div> <div>test</div> <div>test</div> <td></tr> </tbody> <tfoot> <tr><td><div class='footer'></div><td></tr> </tfoot> </table> </div>

    在写css之前先了解一下面的知识:

    css3 媒体查询 @media
    
    @media 查询:可以针对不同媒体类型定义不同的样式

    媒体类型:
    all:用于所有设备
    print:用于打印机和打印预览
    screen:用于屏幕显示
    ...
    这里就简单介绍上面几个。
    https://www.runoob.com/cssref/css3-pr-mediaquery.html
    <style>
      @media print {

        .header-test,.header,
        .footer-test,.footer {
            height:100px
        }

        .header-test {
          position:fixed;
          top:0
        }

        .footer-test {
          position:fixed;
          bottom:0
        }

        

        thead {
          display: table-header-group;
          }

        tfoot {
          display: table-footer-group;
        }


       -------分界线(上面就可以实现每页上都有页眉页脚了)-------------
            
        #printtest {
          display:none;
        }
        .header-test,.footer-test {
          display:block;
        }
    }

    # 网页上隐藏自定义的页眉页脚,打印时才显示
    @media screen {
        #printtest {
          display:block;
        }
        .header-test,.footer-test {
          display:none;
        }

      }
    </style>

    注:不过这种方式,只适合谷歌浏览器,测试过搜狗、ie都有些问题。

  • 相关阅读:
    学生成绩判定系统
    A@2a139a55 结果产生的原因
    为什么子类的构造方法在运行之前,必须调用父类的构造方法?能不能反过来?为什么不能反过来?
    父类与子类之间构造方法的调用关系
    阅读《大道至简》第六章有感
    大数加法 待完善
    BigInteger大数加法源代码及分析
    随机数组求和
    读《大道至简》第五章“失败的过程也是过程 ”有感
    学习进度第15周
  • 原文地址:https://www.cnblogs.com/glf1160/p/12100914.html
Copyright © 2011-2022 走看看