HTML 在打印HTML时在页面上显示页码

在本文中，我们将介绍如何在打印HTML页面时在每一页上显示页码的方法，并提供示例代码进行演示。

阅读更多：HTML 教程

准备工作

首先，我们需要使用HTML和CSS来创建我们的打印页面。我们可以使用<style>标签在HTML中定义样式，以控制打印页面的布局和样式。以下是我们需要添加到HTML文件中的样式代码示例：

<style>
@page {
  size: A4;
  margin: 0;
}
@page :first {
  margin-top: 0;
}
body {
  margin: 40px;
}
footer {
  position: fixed;
  bottom: 0;
  text-align: center;
  font-size: 12px;
}
</style>

在上面的示例中，我们使用了<style>标签，并在其中定义了以下样式：

@page：定义打印页面的属性，例如页面大小和页边距。
@page :first：定义第一页的样式，我们可以在这里设置特殊的页边距或其他样式。
body：设置正文内容的样式，包括页面边距。
footer：设置页脚的样式，通常用于显示页码。

显示页码

要在打印页脚上显示页码，我们可以在HTML文件的底部添加一个<footer>元素，并在其中插入页码。以下是示例代码：

<footer>
  Page <span class="page-number"></span>
</footer>

在上面的示例中，我们使用了一个<span>元素来包裹页码。我们将在JavaScript中更新这个<span>元素的内容，以反映当前页码。

使用JavaScript更新页码

要根据打印页面的当前页数更新页码，我们可以使用JavaScript。以下是示例代码：

<script>
window.onload = function() {
  var pageNumber = 1;
  var pageNumbers = document.getElementsByClassName('page-number');

  for (var i = 0; i < pageNumbers.length; i++) {
    pageNumbers[i].textContent = pageNumber;
  }

  window.onbeforeprint = function() {
    pageNumber = 1;

    for (var i = 0; i < pageNumbers.length; i++) {
      pageNumbers[i].textContent = pageNumber;
    }
  };

  window.onafterprint = function() {
    pageNumber = 1;

    for (var i = 0; i < pageNumbers.length; i++) {
      pageNumbers[i].textContent = '';
    }
  };

  window.onbeforeprint();
};
</script>

在上面的示例中，我们首先获取所有具有page-number类的元素，并将它们存储在名为pageNumbers的数组中。然后，我们使用textContent属性将初始页码设置为1，并在打印之前和打印之后将页码更新为1。

示例演示

在此部分，我们将演示如何使用上面提到的代码在打印页面上显示页码。以下是示例HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>Print Page Numbers Example</title>
  <style>
    /* 样式代码 */
  </style>
  <script>
    // JavaScript代码
  </script>
</head>
<body>
  <h1>这是一个打印页面示例</h1>

  <!-- 页面内容 -->

  <footer>
    Page <span class="page-number"></span>
  </footer>
</body>
</html>

在上面的示例中，我们将样式代码和JavaScript代码添加到<head>元素中，将页面内容添加到<body>元素中，并在底部添加了一个<footer>元素来显示页码。