跳到主要内容

使用 Zapier 将 HTML 转换为 PDF:使用 PDF4me 自动从 Dropbox 文件夹生成发票

22 最小读取
PDF4me Team

将 HTML 转换为 PDF 这是一个适用于 Zapier 的 PDF4me 操作,可以将 HTML 文件转换为可打印的 PDF 文件。配合“生成文档”功能,该 Zap 只需五步即可完成:监控 Dropbox 文件夹,将订单数据合并到 HTML 发票模板中,将结果转换为 A4 尺寸,并将最终生成的 PDF 文件保存回 Dropbox。

大多数“将 HTML 转换为 PDF”的搜索结果都只是提供一个文件拖放框。偶尔这样没问题。但如果每小时都有新订单,就必须有人打开转换器,上传、下载、重命名并归档结果,这就变得很麻烦了。本教程用五个 Zapier 步骤取代了这种繁琐的操作,这些步骤可以独立运行。教程中包含 2026 年 11 月 2 日运行的 Zap 的真实截图以及它使用的确切字段值。

流程概览
1. New File in Folder
Dropbox trigger watching /DocGen/Orders for a new order JSON.
2. Find File
Dropbox fetches invoice-template.html from /DocGen/Templates.
3. Generate Document
PDF4me merges the order JSON into the HTML template.
4. Convert HTML to PDF
PDF4me renders the merged HTML as an A4 portrait PDF.
5. Upload File
Dropbox saves the PDF to /DocGen/Output/ with a runtime name.
简短版

将订单 JSON 文件拖放到已监控的 Dropbox 文件夹中。Zapier 会在两分钟内识别该文件,并从另一个文件夹中提取您的 HTML 发票模板,然后将两者一起交给 PDF4me。“生成文档”功能会将数据合并到模板中,“HTML 转 PDF”功能会将其渲染为 A4 尺寸,边距为 40 像素,最后 Dropbox 会将结果存储为 Invoice-order-INV-2026-1042.pdf。整个过程无需用户打开转换器。

基于“为什么”的问答​

为什么需要两个 PDF4me 操作而不是一个? “生成文档”功能负责数据合并并返回 HTML 代码。“将 HTML 转换为 PDF”功能负责渲染和页面设置。拆分这两个功能意味着您可以更改纸张大小或页边距而无需修改模板,并且以后可以将同一模板重复用于不同的输出格式。

为什么要使用单独的“查找文件”步骤来获取模板? 触发器仅包含刚刚到达的文件,即订单数据。模板存储在一个稳定的位置,因此步骤 2 每次运行时都会从 /DocGen/Templates 读取它。在 Dropbox 中编辑模板后,下一张发票会自动应用,无需 Zap 更改。

为什么要将缩放比例设置为 0.8? HTML 布局是针对屏幕而非页面设计的。缩放比例 0.8 可以将典型的发票表格压缩到 A4 纸张的宽度范围内,避免列格式错乱或溢出到第二页。如果您的模板已经很窄,请将缩放比例提高到接近 1.0。

为什么打印背景很重要? 如果将“打印背景”设置为“否”,浏览器和渲染器会忽略 CSS 背景颜色和图像,因此彩色发票抬头打印出来会是空白的。将其设置为“是”,则 PDF 打印效果将与屏幕上的 HTML 代码保持一致。


您将获得​

输入: 一个订单 JSON 文件被放入一个受监控的 Dropbox 文件夹中,还有一个 HTML 发票模板,该模板会一直保留在那里。 输出: 在 /DocGen/Output/ 目录下生成一个以订单号命名的 A4 PDF 文件,并在最后一步返回一个 Dropbox 共享链接。


你需要什么​

  • Zapier。 打开 PDF4me Zapier 应用免费的 Zapier 计划只能运行单步 Zap,因此这个五步 Zap 需要付费的 Zapier 计划。
  • PDF4me API密钥。 获取您的 API 密钥首次添加 PDF4me 操作时进行连接。
  • Dropbox 包含三个文件夹:/DocGen/Orders 用于存放传入数据,/DocGen/Templates 用于存放模板,/DocGen/Output 用于存放结果。
  • 一份 HTML 发票模板和一个订单示例两者如下所示。

先拿到样品。 在构建 Zap 之前,将 invoice-template.html 放入 /DocGen/Templates 中,这样在测试时,步骤 2 就可以找到它。


流程概览​

  1. 文件夹中的新文件 (Dropbox 触发器,每 2 分钟进行一次投票)。
  2. 查找文件 (Dropbox)提取 invoice-template.html。
  3. 生成文档 (PDF4me) 将 JSON 合并到 HTML 模板中。
  4. 将 HTML 转换为 PDF (PDF4me)以 0.8 倍比例渲染 A4 纵向图像。
  5. 上传文件 (Dropbox)会将 PDF 文件以运行时名称保存。

完整流程概述​

Zapier 运行历史记录显示成功执行了以下五步 Zap:Dropbox 在文件夹中新建文件、Dropbox 查找文件、Pdf4me 生成文档、PDF4me 将 HTML 转换为 PDF 以及 Dropbox 上传文件,所有步骤均显示绿色对勾。

2026 年 11 月 2 日运行成功。每一步都会报告它传递了什么,这是找出运行失败停止位置的最快方法。


步骤 1:如何监视 Dropbox 文件夹中的新订单?​

目前为止的流程: 目前还没有什么,这是触发点。

触发器决定 Zap 的启动方式。将其指向订单数据所在的文件夹,并确保它将文件内容一起传递过去。

  1. 添加 Dropbox 作为触发应用程序并选择 文件夹中的新文件 事件。
  2. 配置:
    • 空间: Default
    • 文件夹: /DocGen/Orders
    • 是否包含子文件夹中的文件?: False
    • 是否包含文件内容?: Yes
    • 包含分享链接吗?: No

文件夹配置中的新文件​

Dropbox“在文件夹中新建文件”触发器配置为:空间默认,文件夹 /DocGen/Orders,包含子文件夹中的文件:否,包含文件内容:是,包含共享链接:否

“包含文件内容”必须设置为“是”。如果设置为“否”,则步骤 3 会接收到一个没有数据的文件引用,合并操作将失败。

提示。 触发器会按计划轮询,运行历史记录中显示为每 2 分钟一次,因此响应接近实时而非瞬时。请将输出文件夹放在受监控文件夹之外,否则保存的 PDF 文件可能会重新触发 Zap。


步骤 2:为什么要在合并之前获取模板?​

目前为止的流程: 文件夹中新建文件。

触发器只会提供订单数据。模板是另一个文件夹中的单独文件,因此需要您显式读取。

  1. 添加 Dropbox 并选择 查找文件 行动。
  2. 配置:
    • 空间: Default
    • 文件夹: /DocGen/Templates
    • 是否包含子文件夹中的文件?: False
    • 文件名: invoice-template.html
    • 是否包含已删除的文件?: False
    • 是否包含文件内容?: Yes
    • 包含分享链接吗?: No
    • 如果没有找到搜索结果,则搜索结果是否成功?: False: step run status is "stopped: halted"
    • 如果找到多个搜索结果: Return first search result

查找文件配置​

Dropbox“查找文件”操作已配置为:文件夹 /DocGen/Templates,文件名 invoice-template.html,包含文件内容为“是”,无结果时停止。

将“如果未找到搜索结果则成功”设置为“否”是故意的。缺少模板时,程序会停止运行,而不是生成空白 PDF 文件。


步骤 3:生成文档如何将 JSON 合并到 HTML 模板中?​

目前为止的流程: 在文件夹中新建文件 + 查找文件。

“生成文档”函数接受两个输入:步骤 2 中的模板和步骤 1 中的数据。它返回合并后的 HTML,而不是 PDF。

  1. 添加 PDF4me 并选择 生成文档 行动。
  2. 配置:
    • 模板文件: 这 文件 步骤 2 的输出,查找文件
    • 模板文件名: invoice-template.html
    • 模板文件类型: HTML
    • 输入数据格式类型: File
    • 数据文件: 这 文件 步骤 1 的输出结果,文件夹中的新文件
    • 输入数据类型: Json
    • 元数据留空
    • 保持PDF可编辑: False

生成文档配置​

使用步骤 2 中的模板文件生成 PDF4me 文档,模板文件名为 invoice-template.html,模板文件类型为 HTML,输入数据格式类型为文件,数据文件来自步骤 1,输入数据类型为 Json,并禁用“保持 PDF 可编辑”选项。

模板文件类型为 HTML,输入数据类型为 Json。这两个下拉菜单选项最常被用户弄错,如果匹配错误,模板中将仍然包含占位符。

提示。 如果您的数据是以 Zapier 字段而不是文件的形式传入的,请切换 输入数据格式类型 从“文件”菜单切换到“文本”选项,然后粘贴 JSON 代码。其余步骤保持不变。


步骤 4:如何在不丢失格式的情况下将 HTML 转换为 PDF?​

目前为止的流程: 在文件夹中新建文件 + 查找文件 + 生成文档。

这篇文章的标题就来源于这一步骤。它会获取第三步合并后的HTML代码并进行渲染,而这里的页面设置字段决定了最终结果是否与原始页面一致。

  1. 添加 PDF4me 并选择 将 HTML 转换为 PDF 行动。
  2. 配置:
    • 文件: 这 文件 URL 步骤 3 的输出,生成文档
    • 文件名: invoice.html
    • 布局: Portrait
    • 纸张尺寸: A4 (8.27in x 11.7in)
    • 规模: 0.8
    • 边距: 40px 两侧
    • 打印背景: True

将 HTML 转换为 PDF 参数​

场地所用价值它控制着什么
文件步骤 3 中的文件 URL合并后的 HTML 代码。请提供文件或文件 URL,不要同时提供两者。
文件名invoice.html为渲染器指定输入。 .html 扩展很重要。
索引文件路径空的仅当输入内容为包含多个 HTML 文件的压缩包时使用。
布局Portrait竖屏或横屏。
纸张尺寸A4 (8.27in x 11.7in)输出PDF的页面尺寸。
规模0.8缩小渲染后的页面,使宽表格适应内容宽度。
边际40px每边设置。请参阅下方关于字段标签的说明。
打印背景True保留 CSS 背景颜色和图像。如果为 false,则打印为空白。
PDF4me 将 HTML 转换为 PDF 的操作已配置,文件 URL 来自步骤 3,文件名为 invoice.html,布局为纵向,纸张尺寸为 A4,缩放比例为 0.8,四个边距字段均为 40px,打印背景为“是”。

对于发票来说,0.8 倍缩放比例和 40 像素边距是一个比较稳妥的初始设置。“打印背景”设置为“真”可以防止彩色页眉打印成空白。

提示。 在当前的 Zapier 应用中,四个边距字段分别显示为“上边距”、“下边距”、“左边距”和“下边距”。第四个框虽然标签如此,但实际上是右边距,因此请按顺序填写所有四个字段。像这里一样,将每边都设置为相同的值,可以完全避免歧义。


步骤 5:完成的 PDF 文件保存在哪里?​

目前为止的流程: 在文件夹中新建文件 + 查找文件 + 生成文档 + 将 HTML 转换为 PDF。

最后一步是将 PDF 文件写回 Dropbox,并为其命名,以便您可以将其与订单关联起来。

  1. 添加 Dropbox 并选择 上传文件 行动。
  2. 配置:
    • 空间: Default
    • 文件夹: /DocGen/Output/
    • 文件: 这 文件 URL 步骤 4 的输出
    • 覆盖: True
    • 指定文件名:字面文本 Invoice- 然后是 文件名 步骤 1 中的字段
    • 指定文件扩展名: pdf
    • 包含分享链接吗?: Yes

上传文件配置​

使用 Dropbox 上传文件操作,文件夹为 /DocGen/Output/,文件来自步骤 4 的文件 URL,覆盖为 True,指定文件名(将“Invoice-”与步骤 1 的文件名 order-INV-2026-1042 合并),指定文件扩展名 pdf,并包含共享链接。

指定文件名会将字面前缀与触发器中的值混合在一起,因此输出是 Invoice-order-INV-2026-1042.pdf,而不是随机标识符。


运行流程并验证​

  1. 发布 电击。
  2. 将示例订单 JSON 拖放到 /DocGen/Orders 中,然后等待下一次轮询,最多两分钟。
  3. 打开 Zap 运行 在 Zapier 中输入并确认所有五个步骤都显示绿色对勾。
  4. 请在 /DocGen/Output/ 目录下查找新生成的 PDF 文件并打开它。页眉应显示颜色,表格应适应页面宽度,文件名应包含订单号。

你实际建造了什么? 一个文档工厂。任何拥有 Dropbox 访问权限的人都可以编辑模板,数据来自任何写入 JSON 的系统,渲染设置则集中在一个 Zapier 步骤中。同样的五步流程可以在 Make、n8n 和 Power Automate 上运行,并配合相同的两个 PDF4me 操作。


无需重建即可添加的常见变体​

通过电子邮件发送发票
在步骤 5 之后添加 Gmail 或 Outlook 步骤,并附加步骤 4 中的文件 URL。客户无需任何人打开 Dropbox 即可获得 PDF 文件。
转换实时 URL
将“将 HTML 转换为 PDF”替换为“将 URL 转换为 PDF”,如果页面已存在于网络上,则跳过步骤 2 和 3。
盖章或保护结果
在步骤 4 和 5 之间插入“添加水印”或“保护 PDF”,以便在存储发票之前对其进行品牌或密码保护。
自动转换与手动转换
手动转换需要人工处理每个文件,且不留下任何记录。而此 Zap 程序可以无人值守运行,自动命名源数据中的每个输出文件,并留下可供审核的运行历史记录。

自动 Zap 与手动转换器​

Zap 与手动这个 Zap在线手动转换器
谁在运营它没人会在文件到达时触发它每个文件仅限一人
我们每次都从订单数据中提取无论浏览器下载什么
页面设置Zap 已修复,每次运行结果都相同每次都是手工重新挑选
记录您可以审核 Zap 运行历史记录。没有任何
成本形状Zapier 计划加上 PDF4me 通话文件免费,但几分钟内就会产生高昂费用

常见问题​

如何将HTML转换为PDF?​

将 HTML 文件提供给渲染器,并指定页面设置。在本 Zap 中,PDF4me 的“将 HTML 转换为 PDF”操作会读取步骤 3 生成的 HTML 文件,应用纵向布局、A4 纸张、0.8 倍缩放和 40 像素边距,并返回一个 PDF 文件。如果您不先合并数据,则可以直接上传文件,此操作也支持直接上传。

可以免费将HTML转换为PDF吗?​

手动转换单个文件在很多地方都是免费的,包括浏览器自带的“打印转 PDF”功能。成本主要体现在自动化转换上,而且是两项独立的费用:一是 Zapier 的付费计划(因为五步 Zap 操作并非一步 Zap),二是 PDF4me API 调用费用。如果每月只有少量文档需要转换,手动转换确实更划算。但如果每天的文档量达到一定程度,手动转换的成本优势就会迅速显现。

如何将HTML转换为PDF而不丢失格式?​

三个字段承担了大部分工作。设置 打印背景 设置为 True,以便 CSS 背景颜色和图像得以保留。 规模 低于 1.0,这里是 0.8,所以宽表格可以适应内容宽度,而不会换行。匹配 纸张尺寸 根据您打印的区域(A4 或 Letter)进行设置。如果模板仍然出现严重的跨页错位,请向 HTML 添加 CSS 分页规则,而不是直接修改渲染器。

我可以批量将HTML转换为PDF吗?​

是的,这个 Zap 已经可以一次处理一个文件,连续进行,这通常才是人们真正想要的“批量”功能。每个拖放到 /DocGen/Orders 目录下的文件都会生成一个单独的 PDF 文件。要一次性处理多个文件,请使用 Zapier 的循环操作 遍历列表,并对每个项目调用一次“将 HTML 转换为 PDF”函数。


故障排除​

PDF 文件中仍然显示占位符而不是实际值。

生成文档失败。请检查输入数据类型是否为 JSON,以及订单文件是否确实是有效的 JSON 格式。末尾的逗号会导致合并操作静默返回未修改的模板。

彩色标题打印出来是白色的

打印背景设置为“否”。请将其设置为“是”。这是所有 HTML 转 PDF 渲染器(不仅仅是 PDF4me)最常见的格式问题。Mozilla 在其文档中记录了底层浏览器的行为。 打印颜色调整。

步骤 2 已停止:无搜索结果

“查找文件”功能无法在 /DocGen/Templates 目录下找到 invoice-template.html 文件。请检查拼写,并确保该文件位于该文件夹中,而不是子文件夹中,因为“包含子文件夹中的文件”选项已设置为“否”。

电击会反复触发。

输出文件夹位于被监控文件夹内,因此每个保存的 PDF 文件都算作一个新文件。请将 /DocGen/Output 放在 /DocGen/Orders 之外,就像本版本中那样。


后续步骤​

同样的五步模式(监视文件夹、获取模板、合并、渲染、使用运行时名称保存)可以处理任何“数据输入,品牌文档输出”的自动化操作。