ToolJet Generate file 动作实战指南在 App Builder 中动态生成并下载 CSV、Text 与 PDF 文件【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet本文围绕 ToolJet 事件系统中的Generate file生成文件动作展开讲解如何在应用运行时根据组件状态动态构造 CSV、纯文本与 PDF 文件并触发浏览器下载同时结合开源仓库的前端实现源码深入剖析该动作的底层执行链路事件分发 → 数据解析 → Blob/PDF 生成帮助你在内部工具、数据看板与业务流程应用中快速落地一键导出能力。Generate file 动作是什么Generate file 是 ToolJet 提供的一种前端事件动作Event Action。当组件事件例如按钮的On click被触发时它可以现算现建一个文件并让用户直接通过浏览器下载全程无需后端服务参与。典型场景包括把表格组件Table当前页的数据导出为 CSV 报表将查询结果序列化后保存为文本文件把结构化数据渲染成带表头的 PDF 表格文档。从源码看该动作在事件管理器中通过generate-file这一 action id 注册其 UI 配置面板位于 EventManager.jsx并提供csv、plaintext、pdf三种类型选项。选项说明在 App Builder 右侧检查器Inspector中为组件配置事件处理器时选择Generate file动作后会看到如下字段选项说明Type要生成的文件类型支持CSV、Text和PDFFile name生成文件的名称含或不含扩展名均可代码会按类型推导 MIMEData用于构造文件的数据其格式取决于所选文件类型详见下文各小节Debounce默认为空可填入数值表示延迟多少毫秒后执行该动作例如300其中 Debounce防抖字段用于控制动作执行时机输入300表示在事件触发 300 毫秒后再执行生成与下载适合需要等待某些状态更新完成的场景。事件分发逻辑位于 eventsSlice.js各字段在解析时会套用默认值文件名为data.txt、类型为csv、数据为空数组case generate-file: { const data getResolvedValue(event.data, customVariables, moduleId) || []; const fileName getResolvedValue(event.fileName, customVariables, moduleId) || data.txt; const fileType getResolvedValue(event.fileType, customVariables, moduleId) || csv; const fileData { csv: generateCSV, plaintext: (plaintext) plaintext, pdf: (pdfData) pdfData, }fileType; return generateFile(fileName, fileData, fileType); }CSV 数据格式要生成 CSV 文件Data 字段需要是一个对象数组。ToolJet 假定每个对象中的键key是一致的并将这些键作为 CSV 的表头列名。示例——直接在 Data 字段中写入如下表达式{{ [ { name: John, email: johntooljet.com }, { name: Sarah, email: sarahtooljet.com }, ] }}执行后会生成如下内容的 CSV 文件name,email John,johntooljet.com Sarah,sarahtooljet.com更常见的做法是绑定表格组件的当前页数据例如在 Data 字段填写{{components.table1.currentPageData}}。底层实现上CSV 序列化由 generate-csv.js 完成它使用papaparse的Papa.unparse(records)将对象数组直接转换为带表头的 CSV 字符串随后在 generate-file.js 中以text/csv的 MIME 类型构造 Blob并借助临时a元素的download属性触发浏览器下载旧版 Edge/IE 走msSaveBlob分支。Text 数据格式要生成纯文本文件Data 字段需要是一个字符串。如果你希望把对象数组导出为文本必须先对数据进行序列化。例如当使用表格组件提供数据时可以在 Data 字段中输入{{JSON.stringify(components.table1.currentPageData)}}这样表格当前页的数据会被转换成 JSON 字符串并以text/plain类型见 generate-file.js生成.txt文件下载。从 eventsSlice.js 的类型映射可以看到plaintext类型对数据不做任何二次转换恒等函数因此数据必须由调用方提前 stringify 成字符串。PDF 数据格式PDF 类型支持两种输入字符串string生成的 PDF 为纯文本内容对象数组array of objects生成的 PDF 以表格形式展示数据第一行为列名表头随后是各行的数据。PDF 的生成完全在浏览器端完成。源码 generate-file.js 动态加载jspdf库并根据数据类型分支处理字符串以doc.text()在页面上按行输出自动换行maxWidth限制为页面宽度减去两侧 10 的边距数组用doc.autoTable()渲染表格表头取自Object.keys(value[0])行数据取自每个对象的Object.values(item)单个对象同样以autoTable渲染成一行一列的表格其他类型抛出Invalid data type. Expected string, object, or array.错误。生成完毕后调用doc.save(filename)输出文件。因此当 Data 字段填入{{components.table1.currentPageData}}这类对象数组时下载到的 PDF 会是一份结构化的数据表格。在 RunJS 中调用 generateFile除了通过可视化事件管理器配置你还可以在RunJS查询中直接调用动作 API完整列表见 run-action-from-runjs.md。通用语法为actions.generateFile(fileName, fileType, data)其中fileName是文件名字符串fileType取csv、plaintext或pdf之一data为要写入文件的数据。三个典型示例// 生成 csv 文件数据来自表格当前页 actions.generateFile(csvfile1, csv, {{components.table1.currentPageData}}) // 生成文本文件数据经 JSON.stringify 序列化 actions.generateFile(textfile1, plaintext, {{JSON.stringify(components.table1.currentPageData)}}) // 生成 PDF 表格文件 actions.generateFile(Pdffile1, pdf, {{components.table1.currentPageData}})在代码层面generateFile动作同样被注册进事件动作白名单见 actions.js 中的generateFile因此从 RunJS 调用与从事件管理器触发走的是同一套执行逻辑。实践建议与注意事项CSV 表头一致性CSV 模式要求数组中每个对象的键一致否则表头会以第一个对象的键为准后续对象中多出的字段会被忽略、缺失的字段会留空建议先对查询结果做字段归一化。大数据量的考虑文件在浏览器内存中通过 Blob 构造超大数组如上万行可能在低配置客户端上造成卡顿建议配合表格分页只导出当前页currentPageData或使用Debounce降低高频触发风险。文件名与扩展名文件名可带扩展名如report.csv代码也会根据类型使用对应的 MIMEtext/csv、text/plain构造 Blob浏览器会按download属性指定的名称保存文件。运行环境Generate file 是纯前端能力不依赖 ToolJet 服务端接口因此也适用于在离线部署的实例中导出数据。通过组合表格组件、查询结果与上述三种数据格式你可以快速为内部工具补上报表导出能力无需编写任何后端代码。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考