<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>　　

<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>    

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>