正文

学会去掉网页打印页眉：用jQuery轻松实现无页眉打印

/0 浏览量
0412

在打印网页时，页眉和页脚往往会包含一些不必要的额外信息，如网站标志、页码等。有时候，我们可能希望打印出来的内容更加简洁，只包含需要打印的核心内容。使用jQuery，我们可以轻松地去除或修改打印时的页眉和页脚。下面，我将详细讲解如何使用jQuery实现无页眉打印。

前提条件

在开始之前，请确保你的网页已经引入了jQuery库。如果没有，可以通过以下代码添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

实现步骤

1. 创建打印样式

首先，我们需要定义一个CSS样式，用于控制打印时的页眉和页脚。在HTML中添加以下样式：

<style>
@media print {
  .noprint {
    display: none;
  }
  .print-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 10px;
    box-shadow: 0 -2px 3px rgba(0,0,0,0.3);
  }
}
</style>

这段代码中，.noprint 类用于隐藏不需要打印的内容，而 .print-footer 类则定义了打印时的页脚样式。

2. 添加页眉和页脚内容

在HTML中，添加页眉和页脚的内容：

<div class="noprint">这是不需要打印的内容</div>
<div class="print-footer">页眉内容</div>
<div class="print-footer">页脚内容</div>

3. 使用jQuery去除页眉

接下来，使用jQuery选择器选择页眉元素，并设置其样式为 display: none;，从而隐藏页眉：

$(document).ready(function() {
  window.print();
  setTimeout(function() {
    $('header').css('display', 'none');
  }, 100);
});

这段代码中，window.print(); 用于触发打印对话框，setTimeout 函数则延迟执行隐藏页眉的操作，以确保打印对话框已经打开。

4. 完整示例

以下是完整的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>无页眉打印示例</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    @media print {
      .noprint {
        display: none;
      }
      .print-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 10px;
        box-shadow: 0 -2px 3px rgba(0,0,0,0.3);
      }
    }
  </style>
</head>
<body>
  <div class="noprint">这是不需要打印的内容</div>
  <header>页眉内容</header>
  <div class="print-footer">页脚内容</div>
  <script>
    $(document).ready(function() {
      window.print();
      setTimeout(function() {
        $('header').css('display', 'none');
      }, 100);
    });
  </script>
</body>
</html>

通过以上步骤，你就可以使用jQuery轻松实现无页眉打印了。当然，这只是一个简单的示例，你可以根据自己的需求对页眉和页脚的内容进行修改。

-- 展开阅读全文 --