正文

如何使用JavaScript设置网页的页眉和页脚打印效果

/0 浏览量
0725

在网页打印时，设置页眉和页脚可以让打印出来的文档更加规范和美观。在JavaScript中，我们可以通过修改打印的CSS样式来设置页眉和页脚。以下是一篇详细介绍如何使用JavaScript设置网页页眉和页脚打印效果的指南。

1. 使用CSS设置打印样式

首先，我们需要定义一个打印时的CSS样式。将以下代码添加到你的HTML文件中的<style>标签或者一个单独的CSS文件中。

@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .print-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #333;
    line-height: 30px;
  }
  .print-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #333;
    line-height: 30px;
  }
}

在上面的代码中，我们定义了两个类：print-header 和 print-footer。这两个类将在打印时应用页眉和页脚的样式。通过使用 @media print 媒体查询，我们确保这些样式只会在打印时生效。

2. 使用JavaScript添加样式

接下来，我们需要使用JavaScript将页眉和页脚的样式应用到页面上。以下是一个示例：

document.addEventListener('DOMContentLoaded', function() {
  // 创建页眉和页脚元素
  var header = document.createElement('div');
  header.classList.add('print-header');
  header.innerHTML = '页眉内容';

  var footer = document.createElement('div');
  footer.classList.add('print-footer');
  footer.innerHTML = '页脚内容';

  // 将页眉和页脚添加到页面中
  document.body.insertBefore(header, document.body.firstChild);
  document.body.appendChild(footer);
});

在上述代码中，我们监听DOMContentLoaded事件以确保在文档加载完成后执行脚本。然后，我们创建页眉和页脚元素，将它们添加到页面中，并设置相应的内容。

3. 打印页面

现在，当用户点击浏览器的打印按钮时，页眉和页脚样式将被应用到打印出来的页面。

总结

通过使用JavaScript和CSS，你可以轻松地为网页添加页眉和页脚打印效果。只需定义相应的样式并使用JavaScript将它们添加到页面中即可。这样，打印出来的文档就会更加规范和美观。

-- 展开阅读全文 --