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

2021-05-06 08:27

阅读：713

标签：lock func 页眉页脚 tom style media 了解测试 --

1，下载jqprint.js，如果报错，可能是jquery的版本太低了。

　　解决：1，更换jquery

　　　　　2，或者引入 jquery-migrate.min.js

input type="button" id="printtest" value="打印" onclick="printtest()">
div id="printcontent">
        
    div>testdiv>    
    div>testdiv>
    div>testdiv>

div>

实际上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>testdiv>    
                  div>testdiv>
                  div>testdiv>
            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:打印页面且自定义页眉页脚

标签：lock func 页眉页脚 tom style media 了解测试 --

原文地址：https://www.cnblogs.com/glf1160/p/12100914.html

上一篇：.NET解所有相机RAW格式照片

下一篇：网页上传文件夹的解决方案

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：js:打印页面且自定义页眉页脚
文章链接：http://soscw.com/index.php/essay/83125.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章