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

我就是我 2021-09-19 10:20 1511阅读 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 条评论，1511人围观）

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

相关阅读

相关 Java 添加Word页眉、页脚

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

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

相关 Word控件Spire.Doc 【页眉页脚】教程(1)：用C#/VB.NET：在 Word 文档中添加页眉和页脚

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

谁践踏了优雅/ 2023年09月25日 16:50/ 0 赞/ 52 阅读

相关论文格式设置-页面设置、页眉页脚、自动生成目录等

一、页面设置我们在平时使用Word编辑、打印文件时常会用到“页面设置”命令 1.最通常的操作方法是：执行“文件→页面设置”菜单命令。 2.将Word的“页面设置”命

爱被打了一巴掌/ 2022年11月06日 08:54/ 0 赞/ 242 阅读

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

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

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

相关如何将页脚固定在页面底部

作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉

迈不过友情╰/ 2022年06月07日 14:21/ 0 赞/ 410 阅读

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

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

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

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

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

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

相关 PDF怎么去除页眉页脚，PDF页眉页脚编辑方法

　　我们在使用文件的时候需要编辑页眉页脚的时候，这个时候我们应该怎么做呢，相信别的文件大家都知道怎么编辑了，PDF文件大家都知道吗，最开始接触这个文件的时候小编觉得很难，之后找

￡神魔★判官ぃ/ 2022年01月13日 00:25/ 0 赞/ 964 阅读

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

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

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

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

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

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