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

2024-03-29 16:32

本文主要是介绍打印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页脚始终固定在底部

 

 

 

 

 

 

这篇关于打印html页面,并在每个页面添加页眉和页脚的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/859086

相关文章

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F