如何为您的 PDF 添加页码、日期和标题

如果您只是保存一份食谱，简单的截图就足够了。

但是，如果您保存网页是为了法律证据、学术研究或商业记录，一张简单的图片是不够的。您需要上下文信息。您需要确切地知道页面是何时保存的、从哪里来的，并且需要页码以便于引用。

我们的工具内置了专业的“页眉和页脚” (Header & Footer) 引擎。它允许您将这些信息自动注入到 PDF 的每一页中。

以下是如何使用它，包括一些您可以立即使用的复制粘贴模板。

工作原理

在我们工具的 “高级设置” (Advanced Settings) 部分，您会找到两个文本框：

Header HTML (出现在每一页的最顶部)
Footer HTML (出现在每一页的最底部)

您可以在这里编写标准的 HTML，但真正的魔力来自于使用我们的 特殊 CSS 类 (Special CSS Classes)。如果您使用这些特定的类名，我们的转换器将自动用正确的数据填充它们：

 → 插入当前的打印日期。
 → 插入网页标题。
 → 插入源 URL。
 → 插入当前页码。
 → 插入总页数。

3 个复制粘贴模板

我们使用“高兼容性”的原生 CSS (style="...") 编写了这些模板，因此它们可以在 PDF 引擎中完美运行，而无需外部样式表。

1. “简单页码” (页脚)

这是经典款。它在每一页的底部放置一个居中的小页码。

将此粘贴到 “Footer HTML” 中：

<div style="font-size: 10px; text-align: center; width: 100%; padding-top: 5px;">
  第 <span class="pageNumber"></span> 页 / 共 <span class="totalPages"></span> 页
</div>

2. “归档” 页脚 (法律/研究)

非常适合取证和归档。它在左侧列出源 URL，在右侧列出保存日期。

将此粘贴到 “Footer HTML” 中：

<div style="font-size: 8px; width: 100%; border-top: 1px solid #ccc; padding-top: 5px; overflow: hidden;">
  <span style="float: left; max-width: 70%;">来源：<span class="url"></span></span>
  <span style="float: right;">保存时间：<span class="date"></span></span>
</div>

3. “专业报告” 页眉

让您的网页截图看起来像一份正式文件。它将标题加粗放在左侧，日期放在右侧。

将此粘贴到 “Header HTML” 中：

<div style="font-size: 10px; width: 100%; margin-bottom: 10px; overflow: hidden;">
  <span style="float: left; font-weight: bold; max-width: 75%;" class="title"></span>
  <span style="float: right;" class="date"></span>
</div>

重要提示

⚠️ 您必须设置边距： 页眉和页脚打印在页面边距内部。如果您的边距设置为“0”，您的页眉将不可见！您必须将顶部和底部边距至少设置为 0.4in (或 10mm) 才能显示这些模板。
字体大小： PDF 引擎处理字体大小的方式与屏幕不同。我们建议使用 8px 到 10px。任何更小的字体都可能无法清晰显示。