js: the printed page and custom headers and footers

1, download jqprint.js, if error, jquery version may be too low.

　　Solution: 1, the replacement jquery

　　　　　2, or by introducing 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>　　

In fact jqprint.js, or call window.print ()

2, custom headers and footers

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

Before writing a css to understand the following knowledge:

css3 media query @media 

@media query: You can define different styles for different media types 

Media Type: 
All: all devices 
print: for printers and print preview 
screen: a screen for showing 
... 
here briefly above a few a. 
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 
　　　　} 

　　　------- boundary (above can be implemented on every page, the header and footer) ------------- 　　　　#printtest { 　　　　　　the display: none; 　　　　}
　　　　　　　　

　　　　the Test-.header, .footer {the Test- 
　　　　　　Run the display: Block; 
　　　　} 
} 

hide custom headers and footers on the page # display when printing 
@media screen {

　　　　#printtest {
　　　　　　display:block;
　　　　}

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

　　}

</style>

Note: However, this approach is only suitable for Google browser, search dogs tested, ie have some problems.