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都有些问题。

  • 相关阅读:
    hdu--2578--与女孩约会
    hdu--2588--欧拉函数||容斥原理
    hdu--2586--lca_tarjan<证明tarjan这个人很流弊>
    hdu--3743--归并排序<自顶向下&&自底向上>2种写法
    hdu--4911--归并排序||树状数组
    hdu--2639--01背包第K解<不同决策的不同解法>
    hdu--2642--二维BIT
    hdu--3833--4000ms才能过的O(N^2)算法
    hdu--3835--最简单的数学..
    hdu--3836--tarjan+缩点
  • 原文地址:https://www.cnblogs.com/glf1160/p/12100914.html
Copyright © 2011-2022 走看看