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

我就是我 2021-09-19 10:20 1527阅读 0赞

【方法一】：

**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页脚始终固定在底部][HTML]

[HTML]: https://blog.csdn.net/c15158032319/article/details/83106114

发表评论取消回复

表情：

评论列表（有 0 条评论，1527人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java 添加Word页眉、页脚

本篇文章将介绍通过java程序来添加Word页眉页脚的方法。鉴于在不同文档中，对页眉页脚的操作要求不同，文章将分别从以下几种情况来阐述： 1.添加页眉页脚添加图片到

迷南。/ 2023年10月18日 19:37/ 0 赞/ 183 阅读

相关 Word控件Spire.Doc 【页眉页脚】教程(8)：设置页面边框是否包围页眉/页脚

[Spire.Doc for .NET][]是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下，轻松快捷高效地

绝地灬酷狼/ 2023年09月25日 20:46/ 0 赞/ 51 阅读

相关 Word控件Spire.Doc 【页眉页脚】教程(7)：添加不同的首页页眉和页脚

Spire.DOC是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下，轻松快捷高效地创建、编辑、转换和打印 M

偏执的太偏执、/ 2023年09月25日 20:15/ 0 赞/ 121 阅读

相关 js 页面打印，兼容单个打印和分页批量打印，自定义页眉和简单页脚

场景：最近在公司做开发，有个需求需要页面打印功能，作为前端半桶水都不到，只会改页面的我，一脸懵逼，公司里也没人系统的做过，按照惯例，本着有事找度娘的心态(我一

谁践踏了优雅/ 2023年06月20日 11:58/ 0 赞/ 26 阅读

相关 Itextpdf添加页眉页脚页码

项目需要样式比较复杂，刚开始因为时间比较紧所以采用了Itextpdf插件代码生成pdf ,实话说过程十分繁琐，因为pdf文件样式比较多，表格也比较多，各种的表格，还有就是页眉页

Love The Way You Lie/ 2023年02月17日 02:51/ 0 赞/ 15 阅读

相关 html页脚紧贴页面底部,CSS：页脚紧贴底部

我的练习来源于《CSS揭秘》这本书第7章-41紧贴底部的页脚这部分内容以及书中提到的链接。方案一描述：以下方案简单、干净、现代并且没有hack，适用于IE8+, Chr

偏执的太偏执、/ 2022年10月06日 04:00/ 0 赞/ 234 阅读

相关 js页面打印去掉页眉页脚

打印的时候有时间和请求的网址，客户不希望有这样的信息，所以再head中添加 <style type="text/css"> @page \{ margin

╰+攻爆jí腚メ/ 2022年05月29日 09:27/ 0 赞/ 294 阅读

相关让web页面页脚footer固定在页面底部

有时候，我们发现很多页面内容不多的时候，页面底部内容飘到了中间： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

野性酷女/ 2022年03月29日 12:08/ 0 赞/ 357 阅读

相关 js浏览器的打印和去除页眉和页脚

<div id="print-conent"> <div id="title" style="text-align:center;fo

偏执的太偏执、/ 2021年11月29日 18:26/ 0 赞/ 699 阅读

相关打印html页面，并在每个页面添加页眉和页脚

【方法一】： 1.网页点击打印时，打印渲染的页面每一页的头部都要有公司logo； 2.而且分页时不能让某一行的表格断开（必须在达到固定高度时让页面自动分页）；

我就是我/ 2021年09月19日 10:20/ 0 赞/ 1528 阅读