window.print 添加页眉页脚

代码

<!DOCTYPE html>
<html><head><link rel="stylesheet" href="style.css" />
</head><body><div class="page-header" style="text-align: center">I'm The Header<br/><button type="button" onClick="window.print()" style="background: pink">PRINT ME!</button></div><div class="page-footer">I'm The Footer</div><table><thead><tr><td><!--place holder for the fixed-position header--><div class="page-header-space"></div></td></tr></thead><tbody><tr><td><!--*** CONTENT GOES HERE ***--><div class="page">PAGE 1</div><div class="page">PAGE 2</div><div class="page" style="line-height: 3;">PAGE 3 - Long Content<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursusmi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolorpharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posueresuscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vellorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blanditpharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodomollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsansem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectusjusto, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Utfermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nullanec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.</div></td></tr></tbody><tfoot><tr><td><!--place holder for the fixed-position footer--><div class="page-footer-space"></div></td></tr></tfoot></table></body></html>

.page-header, .page-header-space {height: 100px;}.page-footer, .page-footer-space {height: 50px;}.page-footer {position: fixed;bottom: 0;width: 100%;border-top: 1px solid black; /* for demo */background: yellow; /* for demo */}.page-header {position: fixed;top: 0mm;width: 100%;border-bottom: 1px solid black; /* for demo */background: yellow; /* for demo */}.page {page-break-after: always;}@page {margin: 20mm}@media print {thead {display: table-header-group;} tfoot {display: table-footer-group;}button {display: none;}body {margin: 0;}}

打印时可重置打印内容

function doPrint2(){//根据div标签ID拿到div中的局部内容bdhtml=window.document.body.innerHTML; var jubuData = document.getElementById("printcontent").innerHTML;//把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容window.document.body.innerHTML= jubuData; //调用打印功能window.print();window.document.body.innerHTML=bdhtml;//重新给页面内容赋值；return false;
}

最终效果

即使内容过多，分页后每一页也有页眉和页脚
但如果是 vue 里的项目，重新赋值 innerHTML 会导致原来绑定在 dom 上的事件被清空，原有的事件失效，只有内容呈现但不可操作页面
可以用 location.reload() 重新加载页面

原文链接：link

window.print 添加页眉页脚相关推荐

window.print() 实现A4纸张打印及去掉页眉页脚及打印链接
1.边距为无 <style> /* 布局纵向 */ .a4-endwise{width: 1150px;height: 1627px;border: 1px #000 solid;} /* ...
window.print()去掉页眉页脚及网址链接
//打印(兼容IE浏览器) function webPrint(objId){ var printContent=document.getElementById(objId).innerHTML;// ...
window.print()打印时，如何自定义页眉/页脚、页边距
自定义页眉/页脚.页边距,要用到ActiveX控件(在ie的安全设置的启用),会修改注册表中ie的设置,代码如下. try{ var hkey_root,hkey_path,hkey_key; hke ...
vue 打印功能调用原生print，带（去掉页眉页脚）分页打印
安装 vue-print-nb插件 npm install vue-print-nb --save 安装完成后在页面引入 import Print from 'vue-print-nb' </ ...
Print 页眉页脚页码
页眉页脚当我们想打印当前页面或者保存当前页面为PDF的时候,希望加上自己自定义的logo或者文字,经过调研,找到如下两种最常用的添加页眉页脚方式,但是却不是最理想的实现方案,依然在努力调研中 tab ...
C# 添加PDF页眉/页脚
这篇文章主要介绍了C# 添加PDF页眉/页脚的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧概述页眉页脚是一篇完整.精致的文档的重要组成部分.在页眉页脚处,可 ...
XMLWorkerHelper生成pdf文件添加页眉页脚
一.Controller代码 import java.io.ByteArrayInputStream; import java.io.FileOutputStream; import java.io. ...
如何给PDF文件添加页眉页脚，一分钟轻松搞定
如何给PDF文件添加页眉页脚?很多在使用PDF文件的人都会有这样的问题,不知道如何给PDF文件添加页眉页脚,想要给PDF文件添加页眉页脚需要使用到PDF编辑器,下面就使用迅捷PDF编辑器为大家操作一下 ...
itext给已有pdf添加页眉页脚
网上百度到的基本都是生成pdf的时候,添加页眉页脚,但是假如对已有的pdf添加页眉页脚就比较麻烦,突然想到了可以曲线救国,用itext进行复制pdf的时候,在添加页眉页脚,最后可以成功的. 生成pdf ...
Word 注重页面细节才专业(添加页眉页脚,调整页边距,消灭孤行) | 职场人就应该这样用 Word
本篇博文结合这两篇食用更佳(知识点遥相呼应,有共通之处,且大多结合使用,轻松举一反三) Excel 表格打印篇(批量添加标题,同页打印,打印logo与页码) Word 高效办公,三步搞定活动策划书 ...

window.print 添加页眉页脚

代码

打印时可重置打印内容

最终效果

window.print 添加页眉页脚相关推荐

最新文章

热门文章