如何在 HTML、CSS 和 JavaScript 中添加打印页眉和页脚?

2024-01-01

我有一个 HTML 和 CSS 文档。我希望每个打印页面都有页眉和页脚,以便当您按“打印”时,每个页面都有相同的页脚和页眉。有没有办法使用网络技术来做到这一点?除了分页后等之外,我找不到太多有关打印的信息。


这是我发现的:

您可以使用position: fixed and top: 0 or bottom: 0将元素定位在顶部/底部each页。然而,由于固定定位在 IE6 上不起作用,唯一的选择是使用带有100%身高和thead and tfoot。它是某种按照你想要的方式工作的魔法(拥有thead and tfoot出现在每个页面上)。如果你不关心IE6,就使用固定定位。

但是,固定定位还意味着您拥有的任何内容都可能位于固定定位元素的后面。因此,实际上,页眉和页脚不占用任何空间。

您无法控制实际的页眉/页脚(例如打印的 URL)。用户必须自己禁用这些。

替代令人痛苦的 HTML/CSS 打印的最佳替代方案是 PDF。您可以控制每个页面的外观、页面大小以及页眉/页脚。缺点是打印速度较慢(生成 PDF 不如加载 HTML 页面那么快)以及使用某些 PDF 库的痛苦。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 HTML、CSS 和 JavaScript 中添加打印页眉和页脚? 的相关文章

随机推荐

  • Microsoft PDC (2009) 中的哪些新闻/谈话将对您作为程序员产生最大影响?

    我已将其设为社区维基 作为一名主要使用 NET的程序员 微软开发平台的功能方向对我的功能工作有很大的影响 最近的 PDC 让我们深入了解了 Microsoft 的开发平台的发展方向 那么您认为 PDC 的哪些内容会对you作为一名程序员 您
  • DataFrame 单元格换行符

    问题很简单 如何防止打印数据框单元格中的换行Jupyter笔记本 不在终端中 我在这里没有看到任何答案 比如使用的答案pd get option display width pd get option display max colwidt
  • gwtbootstrap 始终适用于所有元素

    我想用GWT 引导程序 http gwtbootstrap github io 对于我的应用程序 所以我将 jar 添加到类路径中并在 app gwt xml 中继承它 并且到目前为止它正在工作 我是 Bootstrap 的新手 到目前为止
  • pgAdmin3 连接问题

    我最近正在使用 VMware Workstation 8 设置并运行 Windows 2008 r2 服务器 我正在运行带有 Postgresql 9 1 的 Centos 6 2 虚拟 Linux 盒子 本地一切似乎都正常 我可以通过桥接
  • 无法在 Visual Studio 上加载 ClassDiagram.cd。 “不支持 URI 格式”

    当我尝试打开我的类图时asp net 网络表单项目我收到以下错误 类图 cd 文件已生成 但我无法打开它们 I do have some classes that use the URI class but i don t really t
  • 将 freq 字符串转换为 pandas 中的 DateOffset

    在 pandas 文档中 当谈到诸如 W 或 W SUN 之类的频率字符串时 可以阅读 在幕后 这些频率字符串正在被转换为 pandas DateOffset 的实例 那么 如何在给定字符串的情况下获取 DateOffset 的实例 最终想
  • 如何使用自定义ip地址浏览网页c#/.net

    我正在尝试使用自定义 用户提供的 IP 地址浏览网页 但它不起作用 webBrowser1 成功加载网页 但它没有使用自定义 IP 地址 而是使用真实 IP 地址加载页面 请告诉我如何成功地完成这项工作 这是我的代码 private voi
  • 如何将图像放置在链接内?

    我正在尝试一些非常简单的东西 在链接内我希望有文本和图像 link to NVidia Graphics inventory url class lato do image tag list highlighter png 我希望输出是这样
  • 在循环中使用 SQLAlchemy Session 对象提交数据时出现问题

    我在使用 SQLalchemy 时遇到数据库提交问题 这是我的场景 我有一个要添加到表中的记录列表 将记录添加到表中后 我需要获取插入的记录 Id 并再次插入到第二个表中 我正在单个会话下执行这些操作 下面给出了代码结构 因为我不允许给出代
  • Angular 服务调用另一个服务

    我正在制作一个简单的 Angular 应用程序来管理收入 收入来自我存储在 json 中的项目 用于测试目的 所以 基本上 我使用 Angular 中的一个服务来获取这个 json 并且我希望有另一个服务来调用项目服务并过滤每个项目的收入
  • 未找到符号:引用自:预期位于:平面命名空间 | macOS 大苏尔

    我一直在尝试使用以下方式导入模块 import pyexiv2 这会产生一个错误 Aruns MacBook Air scripts arun python3 99 new camera py crop field Traceback mo
  • uWSGI + virtualenv“没有名为站点的模块”

    所以这似乎是这个设置的一个非常常见的问题 但我找不到任何适用于SO的解决方案 我已经设置了一个非常新的 Ubuntu 15 04 服务器 然后安装了 nginx virtualenv 和 wrapper 和 uWSGI 通过 apt get
  • Roslyn 获取类的依赖项

    我试图确定一个类 它引用什么 其他命名空间或外部库命名空间 对于给定的文档 语法树等来说 似乎是开箱即用的 没有办法做到这一点 而且我需要使用符号查找器 迭代整个代码库中的每个文件 然后调用 find 粘贴找到的引用在地图中 然后向后导航地
  • Objective C - 在哪里释放全局静态变量?

    或者 void initialize 的反义词是什么 这是我的情况 我有一个 Unit 类 其 id initWithName 函数从全局 NSDictionary 获取数据 该全局 NSDictionary 是延迟创建的 在 Unit m
  • 在布尔值中设置额外的位可以使其同时为 true 和 false

    如果我得到一个bool变量并将其第二位设置为 1 则变量同时计算为 true 和 false 用gcc6 3编译以下代码 g选项 gcc v6 3 0 Linux RHEL6 0 2016 x86 64 bin g g main cpp o
  • 具有共享 OpenGL 上下文的 QOpenGLWidget?

    我有一个现有的 OpenGL 上下文 我想与新的 QOpenGLWidget 共享 我知道我可以这样做 创建QOpenGLWidget 等待直到initializeGL被调用并保存上下文 创建新的 QOpenGLContext 并使其与保存
  • 为什么 Debug.Writeline 在文本左侧输出一些变量?

    我有以下代码 我想知道为什么 资产名称 行的输出将变量粘贴到文本的左侧而不是右侧 有人可以帮忙吗 This System Diagnostics Debug WriteLine LoadContent System Diagnostics
  • 使 jetpack compose 中的每个单词都可点击

    ClickableText 将返回单击字符的位置 但是是否可以使每个单词可单击并返回它 Composable fun SimpleClickableText ClickableText text AnnotatedString Click
  • 如何在 JetBrains Rider 中添加/使用 C# 库?

    我正在尝试使用HttpClient客户端但是我无法使用using System Net Http 如何在 JetBrains Rider 中正确使用 C 库 操作系统是linux System Net Http不是控制台应用程序中包含的标准
  • 如何在 HTML、CSS 和 JavaScript 中添加打印页眉和页脚?

    我有一个 HTML 和 CSS 文档 我希望每个打印页面都有页眉和页脚 以便当您按 打印 时 每个页面都有相同的页脚和页眉 有没有办法使用网络技术来做到这一点 除了分页后等之外 我找不到太多有关打印的信息 这是我发现的 您可以使用posit