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都有些問題。