信息是任何企业的生命线,为了让它保持活力,企业必须将信息传递给各种利益相关者,如投资者、银行家、供应商、客户、政府等。这是最简单、最有效的信息传递方式之一正在使用 PDF 文件。这些 PDF 文件可以以不同的方式生成,但它涉及前端和后端应用程序的大量编码和配置。为了在Appsmith(用于构建内部工具的低代码框架)上简化此过程,我们在 n8n 上创建了一个使用 APITemplate 和简单 webhook 的工作流。

本教程是关于从 Appsmith 应用程序上的数据生成和导出 PDF 文件的分步指南。让我们潜入水中!

入门:设置 Appsmith 和要导出的数据

第一步是在 Appsmith 上创建一个帐户。在本教程中,我将使用 Appsmith 的云版本,但您始终可以选择在本地使用 Appsmith 或在您的服务器上自行托管它。

• 导航到appsmith.com如果您是新用户,请注册一个新帐户或登录现有帐户。

• 接下来,在您的首选组织下创建一个新应用程序。您将看到一个编辑器,其中包含构建内部应用程序所需的一切。

现在,让我们从 Appsmith 上已经提供的模拟数据库创建一个表。

• 为此,请单击 Page1 下左侧边栏上数据源旁边的 + 图标。

• 现在选择users数据库 (Postgres) under-sample databases 部分。

• 有了这个,您应该在左侧边栏的数据源部分下看到用户的数据库。现在通过单击用户数据源中的 Create New 按钮来创建一个新查询。

• 这将创建一个名为 Query1 的空查询,将其重命名为getUsers并粘贴以下 SQL 查询:

SELECT * FROM users ORDER BY id LIMIT 10;

• 点击右上角的运行按钮来执行这个查询;它将返回数据库中用户表中前十个用户的详细信息。

现在让我们将它绑定到 Table 小部件上,然后创建一个工作流将其导出到 PDF 文件中。

• 要将查询绑定到表格小部件,请单击小部件旁边的 + 图标并在小部件选项卡下搜索表格。

• 将表格小部件拖放到画布上,然后通过选择画布上的表格打开其属性窗格。您应该在右侧栏上看到所有表格配置。

• 接下来,将 Table Data 属性更新为以下内容:

{{ getUsers.data  }}

• 在这里,我们使用 mustache 绑定将查询中的数据绑定到小部件上。您可以在这些绑定中跨 appsmith 的任何地方编写 JavaScript。

以下是应用程序现在的样子:

太好了,我们的数据现在已经准备好了。现在让我们在 n8n 上创建一个工作流,使用来自APITemplate.io的 API 生成 PDF。

设置APITemplate.io

如果您不熟悉这些工具,以下是帮助您入门的快速介绍:

APITemplate.io: APITemplate 通过简单的 REST API 帮助使用 Zapier、Integromat、N8n ow 自动生成图像和 PDF。

现在让我们在 APITemplate 上创建一个免费帐户;注册后,您将被重定向到您的仪表板。导航到管理模板选项卡并创建一个新的 PDF 模板。

这里的模板是您希望 PDF 组织本教程的方式;我将使用 PDF 模板部分下提供的基本表格模板。

由于我们的目标是导出 Appsmith 表上的数据,因此我导航到 HTML 编辑器并删除了所有不必要的 HTML 内容。

这个想法很简单,我们使用 webhook 从 Appsmith 将动态数据发送到 HTML 模板,APITemplate 将从 HTML 生成 PDF 文件。

以下是添加 HTML 的方式:

此处的 item 变量包含将从 Appsmith 上的 webhook 请求更新的所有数据。

我们在这里看不到任何数据,因为我们没有任何工作流程。所以让我们在 n8n 上创建吧!

在 n8n 上创建工作流

n8n: n8n 帮助您将世界上的每个应用程序与 API 相互连接,无需一行代码即可共享和操作其数据。它是一种易于使用、用户友好且高度可定制的服务,它使用直观的用户界面让您非常快速地设计您独特的工作流程。

我将在本教程中使用 n8n 的云版本。请注意,您也可以在您的服务器上自行托管 n8n。

现在,让我们创建工作流:

• 拖拽一个webhook节点,添加如下配置:

• 将认证类型设置为无。

• POST 的 HTTP 方法。

• 将Response方法设置为**Using 'Respond to Webhook' node**

现在复制 TEST URL,并通过单击 Queries 旁边的 + 图标并将 TEST URL 粘贴到请求 URL 中,在 Appsmith 应用程序上创建一个新 API。将查询重命名为generatePDF以获得更好的命名约定。

现在导航到 API 请求中的 Body 选项卡并粘贴以下 JSON:

{
    items:  {{Table1.tableData}}
}

在这里,我们使用 mustache 绑定将项目数据从表发送到 webhook。

现在,我们可以通过启动工作流来测试这个 webhook;这是它的工作原理:

接下来,拖放一个新的APITemplate.io节点并将其连接到 webhook 并使用以下配置:

• 首先,将 API 密钥复制到 Credentials forAPITemplate.io属性中。

• 将资源设置为PDF,将操作设置为创建

• 模板ID属性可以在管理模板选项卡下找到;这指的是在上一节中创建的模板。

• 切换 JSON 参数并下载到 ON

• 在属性中复制以下内容:

{
    "items": {{(JSON.stringify($node["Webhook"].json["body"]["items"]))}}
}

这是 n8n 使用 webhook 将数据从 Appsmith 发送到 APITemplate 的地方。

现在,将一个新的响应连接到 webhook 节点并将其响应属性设置为第一个传入项目属性。完整的工作流程如下所示:

现在单击执行工作流并在 Appsmith 上运行 API;我们应该会看到带有可下载 PDF URL 的响应:

为了改善外观,我们可以创建一个新按钮并将其 onClick 属性设置为运行 generatePDF 查询并将响应绑定到文本小部件。

这是完整的工作流程:

或者,对于 Appsmith 上的 PDF 生成,我们还可以依赖 Zapier / Adobe 等其他服务。

---

如果您有兴趣使用我们网站上未列出的数据库作为集成,请在Github上提出 PR 告知我们,我们将尽最大努力尽早将其收录。

在Discord上加入我们不断发展的社区,并在Youtube和Twitter上关注我们以保持最新状态。