javascript 打印页眉_代码示例

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

JavaScript可以通过使用`window.print()`方法来打印当前网页。如果想在打印的页面上添加页眉，可以通过CSS样式来实现。

在CSS中定义一个名为`@media print`的媒体查询，这样我们可以在打印模式下应用特定的样式。然后，使用`@page`规则来定义页面的页眉。在页眉中，我们可以使用CSS属性来设置内容、位置、字体大小等。

下面是一个示例代码，演示了如何在打印页面上添加页眉：


<!DOCTYPE html>
<html>
<head>
<style>
@media print {
  @page {
    margin-top: 50px;
    margin-bottom: 20px;
    @top-center {
      content: "这是页眉";
      font-size: 18px;
    }
  }
}
</style>
</head>
<body>
<h1>这是网页的内容</h1>
<p>这是一段示例文本。</p>
<button onclick="window.print()">打印</button>
</body>
</html>

在上面的示例代码中，我们在`@media print`媒体查询中定义了一个`@page`规则。在`@page`规则中，我们使用`margin-top`属性来设置页眉与页面顶部的距离，使用`margin-bottom`属性来设置页眉与页面底部的距离。然后，我们使用`@top-center`规则来定义页眉的内容和样式，其中的`content`属性设置了页眉的文本内容，`font-size`属性设置了页眉的字体大小。

在页面的内容部分，我们添加了一个标题和一段示例文本。我们在页面底部添加了一个按钮，当点击按钮时，会调用`window.print()`方法来触发打印操作。

当我们点击打印按钮时，浏览器会打开打印预览窗口，页面的顶部会显示我们定义的页眉文本。