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　　　　}

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

　　　　.header-test,.footer-test {　　　　　　display:block;　　　　}}

# 网页上隐藏自定义的页眉页脚，打印时才显示@media screen {

　　　　#printtest {　　　　　　display:block;　　　　}

　　　　.header-test,.footer-test {　　　　　　display:none;　　　　}

　　}

</style>

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

原文地址：https://www.cnblogs.com/glf1160/p/12100914.html