chrome浏览器打印页面 怎样自定义页眉跟页脚???跪求啊!!T—T

?forever 2018-06-28 05:14:47
chrome浏览器打印页面 怎样自定义页眉跟页脚
window.print();

膜拜各位大神,寻求帮助啊····
...全文
1748 4 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
阳光真好123 2020-04-29
  • 打赏
  • 举报
回复
楼上的都不行,都会被遮挡,emmmm,去求把
六哲1 2019-11-28
  • 打赏
  • 举报
回复
酷酷的旭 2019-11-28
  • 打赏
  • 举报
回复
HTML结构

<div class="wrapper">
    <div class="content">内容</div>
    <div class="footer">页脚</div>
</div>
CSS
html, body {
    height: 100%;
   }
 
.wrapper {
    position: relative;
    min-height: calc(100% - 40px); //这里可以调整一下
    padding-bottom: 40px;
    box-sizing: border-box;
  }
.footer {
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
    text-align: center;
    line-height: 40px;
  }
天际的海浪 2018-06-28
  • 打赏
  • 举报
回复

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
header, footer {
display: none;
}
@media print {
header {
display: block;
}
footer {
display: block;
}
}
</style>
</head>
<body>

<header>页眉</header>

<p>内容</p>

<footer>页脚</footer>

</body>
</html>

资源下载链接为: https://pan.quark.cn/s/f989b9092fc5 在网页开发中,实现无页眉页脚打印功能是提升用户体验的重要环节。本文将介绍如何通过JavaScript和CSS实现客户端HTML内容的打印,并确保打印时去除不必要的页眉页脚。 print() 方法是JavaScript中用于触发浏览器打印功能的核心工具。它能够打印当前窗口或框架的内容,并在调用时弹出打印对话框,让用户可以进行打印设置,如选择打印机、设置页面范围和布局等。例如,通过简单的 window.print() 调用即可触发打印操作。 在实现打印功能时,可以通过CSS媒体查询 @media print 定义打印时的样式规则。例如,使用以下代码可以移除打印时的页边距: 此外,对于IE浏览器,由于其默认行为可能无法直接去除页眉页脚,可以通过修改注册表设置来实现。例如,以下JavaScript代码可以清除IE的页眉页脚: 在实际应用中,建议对不同浏览器和操作系统进行广泛测试,以确保打印功能的兼容性和稳定性。测试结果显示,在Windows 10环境下,IE11、Chrome、Firefox、360和Edge浏览器均能成功去除页眉页脚。 总结来说,实现无页眉页脚打印功能主要涉及以下要点: 使用JavaScript的 print() 方法触发打印操作。 针对IE浏览器,通过修改注册表设置去除页眉页脚。 利用CSS媒体查询 @media print 定义打印样式,如清除页边距。 在多种浏览器和操作系统上进行测试,确保功能的稳定性和兼容性。 掌握这些方法,可以帮助开发者为用户提供更简洁、友好的打印体验,尤其在需要精确控制打印输出的场景中。

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧