js:打印页面且自定义页眉页脚

Posted 2021-03-20 一种清孤不等闲

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