|
信息是任何企业的生命线,为了让它保持活力,企业必须将信息传递给各种利益相关者,如投资者、银行家、供应商、客户、政府等。这是最简单、最有效的信息传递方式之一正在使用 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上关注我们以保持最新状态。
向您推荐>>ModelScope魔搭中文开源社区 ModelScope旨在打造下一代开源的模型即服务共享平台，为泛AI开发者提供灵活、易用、低成本的一站式模型服务产品，让模型应用更简单！ 加入社区 更多推荐
一个开源应用程序导致 XSS 到 RCE 漏洞缺陷 跨站点脚本 (XSS) 是 Web 应用程序中最常遇到的攻击之一。如果攻击者可以将 JavaScript 代码注入到应用程序输出中,这不仅会导致 cookie 盗窃、重定向或网络钓鱼,而且在某些情况下还会导致系统完全受损。 在本文中,我将通过 Evolution CMS、FUDForum 和 GitBucket 的示例展示如何通过 XSS 实现远程代码执行。 进化CMS v3.1.8 链接:git
我在校园 DevRel 展上的主要收获乔恩·戈特弗里德 E1 嘿嘿👋,欢迎来到校园DevRel 秀的这个博客系列,重点是来自神奇嘉宾DevRels 的经验教训。 在我们开始之前!让我们花点时间了解一下 DevRel 到底是什么。顾名思义,开发者关系(或 DevRel)专注于维护与负责开发组织技术或产品的人员的关系。根据公司及其目标,该领域的角色可以采取各种形式和任务。组织和开发人员之间的沟通通常是 DevRel 的责任,以确保更好的信息流和反馈循环。这是对
克服心理障碍,为开源做贡献 为开源做贡献是一项艰巨的任务。我已经当了 3 年的软件工程师,并且已经构建了近十年的软件,但我从来没有能够为开源项目做出贡献。 它总是显得如此大胆和令人困惑。 我以前开过 PR,接受过几十个比我优秀的开发者的批评,从不流汗。 但开源似乎总是我无法企及的。 为什么重要? 🤔 我 90% 的代码都是闭源的。很多公司都希望看到我的代码和我从事的项目,但除了部署的应用程序和我 3 年前做的一些全栈项目之
|
