CSS 如何在使用wkhtmltopdf的header/footer html中实现页码显示

在本文中，我们将介绍如何使用CSS在使用wkhtmltopdf的header/footer html中实现页码显示。

阅读更多：CSS 教程

1. 了解wkhtmltopdf和header/footer html

wkhtmltopdf是一个开源的命令行工具，用于将HTML文档转换为PDF文件。它支持使用自定义的header和footer HTML模板来在生成的PDF中显示页眉和页脚。

可以在header HTML中添加文本、图像和其他HTML元素来定制页眉。类似地，在footer HTML中也可以添加元素来定制页脚。

2. 使用CSS添加页码到header/footer html

要在header/footer html中添加页码，可以使用CSS的伪元素和计数器。

首先，在HTML中的header或footer元素中添加一个具有唯一ID的容器元素，例如：

<header>
  <div id="page">
    Page <span class="page-number"></span> of <span class="total-pages"></span>
  </div>
</header>

然后，在CSS中定义计数器和伪元素样式：

@page {
  @bottom-left {
    content: counter(page);
  }
}

.page-number:before {
  counter-increment: page;
  content: counter(page);
}

.total-pages:after {
  content: counter(pages);
}

这样，页面会自动计算和显示当前页码和总页数。

3. CSS示例

为了更好地说明如何在header/footer html中使用CSS实现页码显示，我们来看一个示例。

<!DOCTYPE html>
<html>
<head>
  <style>
    @page {
      @bottom-left {
        content: counter(page);
      }
    }

    .page-number:before {
      counter-increment: page;
      content: counter(page);
    }

    .total-pages:after {
      content: counter(pages);
    }
  </style>
</head>
<body>
  <header>
    <div id="page">
      Page <span class="page-number"></span> of <span class="total-pages"></span>
    </div>
  </header>

  <div>
    <h1>Welcome to my webpage</h1>
    <p>This is the content of the webpage.</p>
  </div>

  <footer>
    <div id="page">
      Page <span class="page-number"></span> of <span class="total-pages"></span>
    </div>
  </footer>
</body>
</html>

在上面的示例中，我们在header和footer中添加了相同的HTML结构来显示页码。CSS样式会自动计算和显示当前页码和总页数。