如何使用JavaScript在浏览器中自定义打印页眉页脚？-html教程-PHP中文网

如何使用JavaScript在浏览器中自定义打印页眉页脚？

花韻仙語

发布： 2025-03-26 08:06:01

原创

884人浏览过

如何使用javascript在浏览器中自定义打印页眉页脚？

JavaScript自定义浏览器打印页眉页脚：告别默认设置

网页打印时，默认的页眉页脚往往不够灵活。本文将介绍如何利用JavaScript和CSS，自定义浏览器打印输出的页眉和页脚，提升打印文档的专业性和美观度。

需要注意的是，window.print()本身并不直接支持页眉页脚自定义。我们需要借助CSS的@media print规则来实现。

创建自定义页眉

我们通过创建一个专门用于打印页眉的HTML元素，并使用CSS样式来控制其在打印时的显示效果。

以下示例代码展示了如何创建一个自定义页眉：

立即学习“Java免费学习笔记（深入）”；

<style>
  @media print {
    .print-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 50px; /* 页眉高度 */
      background-color: #f0f0f0; /* 页眉背景色 */
      text-align: center; /* 文字居中 */
      font-size: 14px; /* 字体大小 */
    }
    .content {
      margin-top: 60px; /* 避免内容与页眉重叠 */
    }
  }
</style>

<div class="print-header">我的自定义页眉</div>
<div class="content">
  <!--  网页内容 -->
</div>

<script>
  window.print();
</script>

登录后复制

代码中，.print-header类定义了页眉样式，@media print确保其仅在打印时生效。content区域的margin-top属性则避免了内容与页眉重叠。您可以根据需要修改页眉内容、高度、背景色和字体等样式。