使用 jquery 在打印页面上创建 fooer - Javascript (1)

📌 相关文章

📜 使用 jquery 在打印页面上创建 fooer - Javascript (1)

📅 最后修改于: 2023-12-03 15:36:30.849000 🧑 作者: Mango

使用 jQuery 在打印页面上创建 footer

在打印网页时，很多时候我们需要为页面添加 footer，来标记是哪一个页面，或者添加一些版权信息等。在本文中，我们将使用 jQuery 来在打印页面上创建 footer。

步骤

在 HTML 文件中添加需要打印的内容和 footer 的模板：

<body>
  <h1>这是要打印的内容</h1>
  <p>这里是内容的详细介绍</p>

  <div class="footer">
    <p>版权信息 © 2021</p>
  </div>
</body>

使用 CSS 对 footer 进行样式设置：

@media print {
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
}

该样式设置可以让 footer 固定在页面的底部，并且覆盖到所有内容之上，使得在页面打印时这个 footer 可以始终显示在每一页底部。

使用 jQuery 将 footer 插入到页面中：

$(document).ready(function() {
  // 创建 footer 元素
  var $footer = $('<div/>').addClass('footer').html('<p>版权信息 © 2021</p>');

  // 将 footer 插入文档末尾
  $('body').append($footer);
});

这段代码可以创建一个新的 div 元素作为 footer 的容器，并根据需要设置 footer 的样式和内容。然后，使用 jQuery 的 append 方法将 footer 插入到页面的末尾。

调用浏览器的打印功能来打印网页：

window.print();

这段代码可以直接调用浏览器的 print 方法，从而触发打印功能并将该页面打印出来。此时，我们可以看到我们刚刚创建的 footer 成功地出现在了每一页的底部。

结论

通过使用 jQuery 和 CSS，我们可以很容易地在打印页面上创建 footer，以便为页面添加版权信息或者其他标记。总体来说，这个过程非常简单，即使对于初学者来说也非常容易上手。