如何在 Make 中为 PDF 添加 HTML 页眉和页脚？无需代码的 3 步指南！

如果您已经在使用 制作 （原名 Integromat）用于自动化工作流程，并添加专业功能 HTML页眉和页脚 为 PDF 添加自定义页眉或页脚非常简单：三个模块，无需编写代码。本指南将向您展示如何设置一个 Make 场景，该场景从 Dropbox 下载 PDF 文件，使用 PDF4me 添加自定义页眉或页脚，然后将添加品牌标识的文件上传回 Dropbox。您将使用 向 PDF 添加 HTML 页眉/页脚 直接将你的 HTML 代码粘贴到 Make 中，无需单独的头部文件。

您的制作流程：3 个模块，1 个目标​

该场景分为三个步骤： Dropbox，下载文件 → PDF4me，为 PDF 添加 HTML 页眉页脚 → Dropbox，上传文件每个模块都与下一个模块相连，而 PDF4me 模块则是您定义页眉或页脚 HTML 的地方。

你需要…… Dropbox 连接（用于读取和写入文件）和 PDF4me 连接（使用您的 API密钥一旦两者都设置好，流程即可在几秒钟内完成端到端运行。

输入文件

输出文件

步骤 1：Dropbox：下载文件​

首先是 Dropbox 模块并选择 下载文件此步骤会获取要添加页眉或页脚的 PDF 文件。

1. 添加 Dropbox 模块 → 选择 下载文件。
2. 联系 （必填）：选择您的 Dropbox 帐户或添加新帐户。
3. 文件选择方式设置为 选择文件。
4. 文件 （必填）：请输入PDF文件的完整路径，例如： / Blog Data / sample_3_page.pdf如果需要，可以使用文件夹图标浏览您的 Dropbox。

点击 节省该模块会输出文件内容，下一步您将把这些内容传递给 PDF4me。

步骤 2：PDF4me：向 PDF 添加 HTML 页眉/页脚​

添加 PDF4me 模块和选择 向 PDF 添加 HTML 页眉/页脚在这里粘贴你的 HTML 代码，设置位置（页眉或页脚），并微调边距。

1. 添加 PDF4me 模块 → 选择 向 PDF 添加 HTML 页眉/页脚。
2. 文件 （必填）：映射输出 Dropbox：下载文件 （PDF二进制文件）。
3. HTML 内容 （必填）：直接粘贴您的页眉或页脚 HTML 代码。页脚示例：

<div class="footer-column footer-right" style="flex:1;text-align:right;">
 <h4 style="margin:0 0 0.2rem 0;font-weight:600;font-size:10px;">Address - Switzerland</h4>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Joweid Zentrum 1 8630 Rüti</p>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Switzerland Tel: +41 41 500 20 09</p>
 <p style="margin:0;font-size:9px;">Email: [email protected]</p>
</div>

4. 地点 （必填）：选择 标题 或者 页脚 这取决于你想把HTML代码放在哪里。
5. 跳过第一页： 不 适用于所有页面； 是的 如果您想跳过第一页（例如封面）。
6. 页设置为 全部 在每个页面添加页眉/页脚。
7. 页边距（毫米）：利用 毫米 （非像素）。示例值： 利润率底部 1、 左边距 2， 右边距 1. 离开 边距顶部 除非使用标题，否则为空。

点击 节省PDF4me 会返回带有品牌标识的 PDF 文件，您将在步骤 3 中上传该文件。

步骤 3：Dropbox：上传文件​

使用以下命令将修改后的 PDF 文件保存回 Dropbox： Dropbox，上传文件。

1. 添加 Dropbox 模块 → 选择 上传文件。
2. 联系：与步骤 1 中相同的 Dropbox 帐户。
3. 文件夹 （必填）：输出目标路径，例如： / Blog Data /。
4. 文件 （必填）：映射输出 PDF4me：为 PDF 添加 HTML 页眉和页脚从 PDF4me 模块中选择 PDF 文件， 不是 从下载步骤中得到的是原始文件；您需要的是应用了页眉/页脚的新文件。

点击 节省 运行该场景。您的 PDF 文件将带有品牌标识并保存到您选择的文件夹中。

HTML 代码片段示例：复制并用于制作​

这些 PDF友好 代码片段在 Make 中有效 HTML 内容 字段。展开下方任意代码块即可复制粘贴、将占位符替换为您自己的文本或创建变量。

标题​

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 50%; vertical-align: top;"></td>
 <td style="width: 50%; text-align: right; vertical-align: top;">
 Author: Per Nordqvist<br/>
 Date: 2025-11-12<br/>
 Revision: 4.24
 </td>
 </tr>
</table>

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 50%; vertical-align: top;">Document title</td>
 <td style="width: 50%; text-align: right;">
 Author: Your Name | Date: 2025-11-12 | Page 1 of 5
 </td>
 </tr>
</table>

<div style="text-align: center; font-family: Arial, sans-serif; font-size: 12px; color: #333333;">Document Title - Confidential</div>

页脚​

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 9px; color: #666666;">
 <tr>
 <td style="text-align: center; padding: 4px 0;">Confidential. For internal use only. All rights reserved.</td>
 </tr>
</table>

<div class="footer-column footer-right" style="flex:1;text-align:right;">
 <h4 style="margin:0 0 0.2rem 0;font-weight:600;font-size:10px;">Your Company Name</h4>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Street Address City Postal</p>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Country Tel: +1 234 567 890</p>
 <p style="margin:0;font-size:9px;">Email: [email protected]</p>
</div>

<div style="text-align: center; font-family: Arial, sans-serif; font-size: 10px;">Page 1 of 5</div>

粘贴 HTML 代码前：快速检查清单​

添加 HTML 页眉/页脚 API 需要 纯 HTML 在 HTML 内容 字段。为了在 Make 中输出可靠的 PDF 文件：

• 内联 CSS： 使用 style="..." 元素上会应用外部样式表。页眉/页脚区域不会应用外部样式表。
• 表格或简单方块使用 <table> 或者带有明确说明的 div 元素。 width 因此，PDF 中的列不会换行或重新排版。
• 单位Make 的边距设置已设置好 毫米（mm）在 HTML 中，您可以使用 px 或者 % 用于字体大小和布局。
• 先测试将您的代码片段粘贴到 向 PDF 添加 HTML 页眉/页脚 在将其连接到 Make 之前，请使用示例 PDF 和您的 API 密钥进行测试。

提示：在 API 测试器中尝试一下

将上面的任意代码片段粘贴到 API 测试器中 html内容 领域的 向 PDF 添加 HTML 页眉/页脚 测试人员，请添加您的 API 密钥和示例 PDF，然后选择 标题 或者 页脚每个代码块都可直接复制。 :::

公司标志、客户定制页脚等等​

您可以添加一个 公司标志 在标题中， 每个客户的页脚信息都不同以及额外的字段（发票编号、项目代码、帐户 ID），方法是根据您的数据构建 HTML 并将其传递。 HTML 内容 在 PDF4me 模块中。

带有公司标志的页眉​

使用 <img> 标签 公共网址 或者 Base64 数据 URI 因此，徽标会出现在页眉或页脚中。

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 80px; vertical-align: middle; padding-right: 12px;">
 <img src="https://your-domain.com/logo.png" alt="Logo" style="max-width: 72px; max-height: 36px; display: block;" />
 </td>
 <td style="vertical-align: middle;">
 <strong>Your Company Name</strong><br/>
 <span style="font-size: 9px; color: #666666;">Tagline or document type</span>
 </td>
 </tr>
</table>

每个客户的页脚​

当您为多个客户生成 PDF 时，请根据客户数据（姓名、帐户 ID、文档参考号）构建 HTML，并将其传递给 PDF4me 模块。在 Make 中，您可以使用来自先前模块的数据或迭代器来动态构建 HTML。

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 9px; color: #666666;">
 <tr>
 <td style="text-align: center; padding: 4px 0;">
 Prepared for: Customer Name | Account: ACC-12345 | Doc ref: INV-2025-001
 </td>
 </tr>
</table>

使用场景：Make 与 API​

您可以通过两种方式添加页眉和页脚：

1. 制作使用 添加 HTML 页眉页脚模块把你的PDF文件放进去 文件 （从 Dropbox 或其他来源）粘贴 HTML 代码 HTML 内容， 选择 标题 或者 页脚， 放 页 （例如。 all），并以毫米为单位调整边距。
2. API： 称呼 POST /api/v2/AddHtmlHeaderFooter 和 文档内容 （Base64 PDF） 文档名称， html内容 （纯 HTML）和 地点。 选修的： 页面， 跳过第一页以及边缘参数（单位：毫米）。

同样的HTML代码在两种情况下都能正常工作。您可以将本文中的代码片段直接用于任一位置。

后续步骤​

• 运行该场景按照以上三个步骤操作，将代码片段粘贴到 HTML 内容并运行该流程。
• 尝试使用 API使用 向 PDF 添加 HTML 页眉/页脚 测试工具可使用示例 PDF 预览您的 HTML 代码。
• 阅读 Make 文档： 在 Make 中添加 HTML 页眉页脚 查看完整参数详情。
• 完整 API 参考： 向 PDF 添加 HTML 页眉/页脚（PDF4me API）。