打印html页面,并在每个页面添加页眉和页脚

【方法一】:

1.网页点击打印时,打印渲染的页面每一页的头部都要有公司logo;
2.而且分页时不能让某一行的表格断开(必须在达到固定高度时让页面自动分页);

@media screen {
		div.divHeader{
			display:none;
		}
		  div.divFooter {
		    display: none;
		  }
	}
	@media print {
			div.divHeader{
				position:fixed;
				top:0;
			}
		  div.divFooter {
		    position: fixed;
		    bottom: 0;
		  }	
	}

<!--页眉  -->
<div class="divHeader">页眉</div>

<!--  页脚-->
<div class="divFooter" >
	页脚
</div>

【效果分析】:

打印出来的页脚存在与word文件的最后一行,但并不是页脚的位置。(自我感觉作用不大)

【方法二】:

<script> 
$(document).ready(function(){ 
	function t(){ 
		var e = $(".footer");//获取页脚div的对象 
		var h = e.offset().top + e.height() ;//获取页脚偏移量加页脚高度的值
		//判断页脚div底部到页面顶端的实际距离是否小于页面可见区域高度 
		if(h < document.body.clientHeight){ 
			//当页面刚好可以包容所有内容不需要下拉时直接加上个定位就是了,当然这里也可以用绝对和相对属性 
			//具体设置根据你实际情况来定吧 
			$(".footer").css({position:"fixed",left:"3%",bottom:"0px"}); 
			return; 
		} 
	function t2(){ 
		var a = $(document).scrollTop()+document.documentElement.clientHeight-50;//获取页面滑动偏移量加页面可见区域的高度 
		//判断页脚div底部到页面顶端的实际距离是否小于页面滑动偏移量加页面可见区域高度 
		if(a >= h){ 
			//如果页面内容太多,需要下滑展示的时候,给页脚一个固定定位属性 
			$(".footer").css({position:"fixed",left:"3%",bottom:"0px"}); 
		}else{ 
			//当页面重新上滑页脚需要被隐藏的时候移除它的定位属性,这样不论何时,它肯定是被页面撑起来固定到底部展示的。 
			$(".footer").removeAttr("style"); 
		} 
	} 
	t2(); 
	//在页面大小改变时触发方法t2 
	$(document).resize(t2); 
	//在页面滑动时触发方法t2 
	$(document).scroll(t2); 
} 
//直接运行方法t 
t(); 
}); 
$(document).ready(function(){ 
	function t(){ 
		var e = $(".header");//获取页眉div的对象 
		var h = e.offset().top + e.height() ;//获取页脚偏移量加页脚高度的值
		//判断页脚div底部到页面顶端的实际距离是否小于页面可见区域高度 
		if(h < document.body.clientHeight){ 
			//当页面刚好可以包容所有内容不需要下拉时直接加上个定位就是了,当然这里也可以用绝对和相对属性 
			//具体设置根据你实际情况来定吧 
			$(".header").css({position:"fixed",right:"3%",top:"0px"}); 
			return; 
		} 
	function t2(){ 
		var a = $(document).scrollTop()+document.documentElement.clientHeight;//获取页面滑动偏移量加页面可见区域的高度 
		//判断页脚div底部到页面顶端的实际距离是否小于页面滑动偏移量加页面可见区域高度 
		if(a >= h){ 
			//如果页面内容太多,需要下滑展示的时候,给页脚一个固定定位属性 
			$(".header").css({position:"fixed",right:"3%",top:"0px"}); 
		}else{ 
			//当页面重新上滑页脚需要被隐藏的时候移除它的定位属性,这样不论何时,它肯定是被页面撑起来固定到底部展示的。 
			$(".header").removeAttr("style"); 
		} 
	} 
	t2(); 
	//在页面大小改变时触发方法t2 
	$(document).resize(t2); 
	//在页面滑动时触发方法t2 
	$(document).scroll(t2); 
} 
//直接运行方法t 
t(); 
}); 
</script>


<!--页眉  -->
<div style='background:#ccc;' class="header"><span style="line-height: 30px;">合同编号:<%=contractCount.getContractId() %></span>
</div>

<!--  页脚-->
<div class='footer'><span style="height: 20px;">
<p align="center">我爱学习</p>
<small >我们是进步的好青年</small><small style="margin-left: 530px;">哈哈哈哈哈哈哈哈哈哈</small>
<small>Emila:cbuydfgcuadyrgf</small><small style="margin-left: 370px;">http://www.svdfvudhfguem</small></span></div>

【效果分析】:

会出现页眉页脚处与打印的内容重合。

【资料】

一、HTML页脚始终固定在底部

 

 

 

 

 

 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值