CSS实现自动分页打印同时每页保留重复的自定义内容

当需要打印的内容过长时系统会产生自动分割页面，造成样式不太美观。使用CSS的 @media print 结合 <table> 可以实现对分页样式的可控。效果如下：

假设有50条数据，打印时系统会自动分成两页，同时每页保留自定义的header和footer。

代码如下：

<html>
<head><title>print</title><style>/* 在打印时应用此规则 */@media print {@page {/* 文档的页面大小 */size: A4;/* 文档的页边距 */margin: 10mm 20mm 20mm;}table {width: 100%;border-collapse: collapse;}tbody tr td {padding-left: 5px;border: 1px solid #000;word-break: keep-all;font-size: .9rem;}.header-row th {border: 1px solid #000;}.title {margin: 0 0 20px;font-size: 1.5rem;}.footer-row {padding-top: 10px;}}</style>
</head>
<body><table><thead><tr><th colspan="3"><div class="title">标题1标题1</div></th></tr><tr class="header-row"><th>First Name</th><th>Last Name</th><th>age</th></tr></thead><tbody id="tbody"></tbody><tfoot><tr><td colspan="1" class="footer-row"><div>打印人：小王</div></td><td colspan="2" class="footer-row"><div class="footer-time">打印时间：2000-01-01 00:00:00</div></td></tr></tfoot></table><script>// mockconst rowNum = 50;const fragment = document.createDocumentFragment();for (let i = 0; i < rowNum; i++) {const _tr = document.createElement('tr');const _td1 = document.createElement('td');const _td2 = document.createElement('td');const _td3 = document.createElement('td');_td1.appendChild(document.createTextNode(`John${i}`));_td2.appendChild(document.createTextNode(`Doe${i}`));_td3.appendChild(document.createTextNode(`${i}`));_tr.appendChild(_td1);_tr.appendChild(_td2);_tr.appendChild(_td3);fragment.appendChild(_tr);}document.querySelector('#tbody').appendChild(fragment);</script>
</body>
</html>

ctrl+p / command+p 唤起打印即可查看效果

注：不能使用 @page 规则修改所有的css属性，只能修改文档的 margin、orphans、windows 和分页符，对其他属性的修改无效。@page

CSS实现自动分页打印同时每页保留重复的自定义内容相关推荐

锐浪报表打印时第二页会重复打印信息
如图所示,在第二页的时候会出现重复问题解决方法: 需要改两个地方,一个是报表节的可伸展属性改为是,二是把报表部件框的可伸展属性改为是,文字自动绕行也改为是.这样子就不会重复了
html打印预览出现重叠,html – 使用打印模式css打印网页时页眉和正文内容重叠...
我必须在每个页面打印带有自定义标题的网页, 下面是我的打印媒体CSS代码 @media screen { header.onlyprint, footer.onlyprint,.watermark{ ...
CSS设置打印时的页边距和多余空白页问题
设置打印时的页边距 @page {size:auto;margin:30mm 20mm; /*上下30mm页边距,左右20mm页边距*/} 设置打印时可能会出现多余空白页问题 @media print ...
window.print只打印了1页的原因
2019独角兽企业重金招聘Python工程师标准>>> 当css中做如下设置 body{ height:100% } 或者 body { height: 100% } window. ...
js iframe 打印打印预览页眉页脚的设置
1.window.print方式: Html代码 //jsp页面打印按钮: <input type="button" value="打印" onclic ...
如何使用CSS创建易于打印的页面
"谁打印网页?" 我听到你哭了!相对而言,很少有纸页可以复制.但是请考虑: 打印旅行或音乐会门票复制路线方向或时间表保存副本以供离线阅读在连通性差的区域中访问信息在危险或肮脏的条件 ...
【js、vue-print-nb】js 在Chorme中打印页面去掉页眉页脚
js或者vue-print-nb插件在chorme调用打印是都会带上页眉页脚及时间. 在chorme中可以手动设置打印是否要页眉页脚,如果不想手动打印时设置可以参考用css 控制: 参考:http ...
Vue中使用v-print打印出现空白页
本人最近做项目时遇到打印出现空白页的问题,查阅资料后找到解决办法,方便同行们快速解决问题. 1.解决办法:在css中加入 "body{ height:auto; }" 即可解决问题 ...
打印冻结窗格怎么保证每页都有_《excel如何打印标题行》 EXCEL 如何让冻结的窗口在打印的每页上面显示...
excel 怎么添加标题? 说得不清不楚,不过我你要说的问题,你怎么把的第一上标题是吗? 因为在excle文件,一个工作表只有一个标题行,如果文件多页打印的时候,只有第一页有标题行,其它页都没有.设置 ...

CSS实现自动分页打印同时每页保留重复的自定义内容

CSS实现自动分页打印同时每页保留重复的自定义内容相关推荐

最新文章

热门文章