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

最新推荐文章于 2024-07-14 15:54:59 发布

A青火

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量1.3k

点赞数 2

文章标签： javascript 前端 html java json

本文链接：https://blog.csdn.net/qq_34006340/article/details/130525566

版权

效果预览:

1 添加页眉元素/页脚元素

     <div class='header'>我是页眉</div>
     <div class='footer'>我是页脚</div>

2 table添加<thead>和<tfoot>元素

$('table>tbody').before('<thead style="display:table-header-group;"><tr><td><div class="myheader"></div></td></tr></thead>')
$('table>tbody').after('<tfoot style="display:table-footer-group;"><tr><td><div class="myfooter"></div></td></tr></tfoot>')

3 添加打印样式(在打印状态下,给表头thead一个高度,将页眉元素定位到thead上),页脚同理

@media print {
     .myheader{
	     height:110px;
	 }
	 .header{
	      position:fixed;
		  top:0;
	      height:100px;
		  background:#fff!important;
		  z-index:9999;
	 }
}