如何在 PDF 中添加页码？使用 HTML 页眉/页脚和 wkhtmltopdf 的详细指南

使用 HTML 页眉/页脚和 wkhtmltopdf 为 PDF 添加页码

简介

使用 HTML 页眉/页脚是创建具有自定义布局和设计的 PDF 文档的有效方法。本文将指导您如何使用 HTML 页眉/页脚和 wkhtmltopdf 库为 PDF 文档添加页码。我们将深入探讨必要步骤，提供 JavaScript 代码示例，并解决常见的疑难杂症。

步骤

1. 创建 HTML 模板

创建一个包含页眉、页脚和页码占位符的 HTML 模板。确保页眉/页脚高度与 CSS 样式相匹配。

<!-- 页眉/页脚占位符 -->
<header></header>
<footer><div class="page-number"></div></footer>

2. 嵌入 JavaScript

将 JavaScript 代码嵌入 HTML 模板中，以使用 wkhtmltopdf 内置函数填充页码占位符。

<script>
  var pageCount = 0;
  window.onload = function() {
    var pageNumbers = document.getElementsByClassName('page-number');
    for (var i = 0; i < pageNumbers.length; i++) {
      pageCount++;
      pageNumbers[i].innerHTML = pageCount;
    }
  };
</script>

3. 运行 wkhtmltopdf

使用 --javascript-delay 选项运行 wkhtmltopdf，允许 JavaScript 执行，并在 --header-html 和 --footer-html 选项中指定 HTML 模板。

wkhtmltopdf --javascript-delay 5000 --header-html header.html --footer-html footer.html input.html output.pdf

注意事项

• 调整 --javascript-delay 选项，以适应 JavaScript 执行时间。
• 使用 CSS 确保页眉/页脚高度匹配 PDF 中的设置。
• 对于复杂模板，使用其他 JavaScript 技术（例如，PDFKit）生成高级页眉/页脚。

常见问题解答

1. 页码未显示

• 确保已将 JavaScript 代码嵌入 HTML 模板。
• 检查 JavaScript 延迟时间是否足够长，以允许 JavaScript 执行。

2. 页码不正确

• 确保 HTML 模板中页码占位符的样式与 CSS 相匹配。
• 对于具有多个页面的文档，检查每个页面的页眉/页脚是否正确设置。

3. PDF 生成速度慢

• JavaScript 执行可能会降低 PDF 生成速度。
• 尝试使用更简单的 JavaScript 代码或考虑使用其他解决方案（例如，PDFKit）。

4. 页眉/页脚与 PDF 内容重叠

• 确保页眉/页脚高度在 CSS 中正确设置。
• 检查 PDF 中的页面边距是否足够，以容纳页眉/页脚。

5. 页码重复

• 确保 JavaScript 代码仅在文档的每一页上执行一次。
• 检查 HTML 模板中是否有多个页码占位符，并确保它们都正确引用。

总结

使用 HTML 页眉/页脚和 wkhtmltopdf 为 PDF 文档添加页码是一种强大且灵活的方法。通过遵循本文中的步骤，您可以创建具有自定义布局和页码的专业 PDF 文档。不断探索和尝试不同的技术，以满足您的特定需求，并提高您的 PDF 生成技能。