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

js:打印页面且自界说页眉页脚