在 n8n 中实现 Google 表格数据预加载到表单

整体流程概览

1. 前端或 n8n 流程触发时，调用 n8n 中暴露的接口（HTTP/Webhook 或表单触发器 URL）。

2. n8n 工作流中使用 Google Sheets 节点读取指定表格数据。

3. 将读取的数据格式化并通过 HTTP Response 或 URL 查询参数传回表单页面。

4. 表单页面接收返回值，自动将字段赋值，实现预填充。

详细实现步骤

1. 配置 Google Sheets 节点

• Authentication：OAuth2 凭据，确保已授权访问目标表格。

• Spreadsheet ID：目标 Google 表格的 ID。

• Sheet Name：要读取的工作表名称。

• Range：可选行/列范围（如 A2:C10），或留空读取整表。
读取完成后，节点输出包含表格中每一行的 JSON 对象，每个键对应列标题[web

2. 触发方式一：表单触发器 + 查询参数

1. 在工作流中添加「Form Trigger」节点，定义一个表单页面并生成 URL。

2. 在 Google Sheets 节点后，插入「Set」节点，将所需字段映射为查询参数键值对，例如：
• name → {{$json["Name"]}}
• email → {{$json["Email"]}}

3. 连接「Set」节点至「Function」节点，组装带查询参数的表单 URL：
javascript
const params = new URLSearchParams({ name: items.json.name, email: items.json.email,}).toString();return [{ json: { url: `https://your-n8n-url/form/your-form?${params}` } }];

4. 在前端或其他流程中，访问该 URL，表单节点会根据查询参数自动填充对应字段[web:

3. 触发方式二：HTTP/Webhook + AJAX 加载

1. 在工作流开始处添加「Webhook」或「HTTP Request Trigger」节点，设置路径如 /form-data。

2. 将该触发器连接至 Google Sheets 节点，读取表格数据。

3. 紧接「HTTP Response」节点，设置响应内容为 Google Sheets 节点的输出：
json
{{ $json["Name"] }}{{ $json["Email"] }}

4. 前端表单页面加载时，通过 fetch('https://your-n8n-url/webhook/form-data') 获取返回的 JSON，并赋值给表单字段：
javascript
fetch('/webhook/form-data') .then(res => res.json()) .then(data => { document.getElementById('name').value = data.name; document.getElementById('email').value = data.email; });

常见注意事项

• URL 编码：查询参数中的特殊字符必须进行百分号编码，确保传参准确。

• 节点顺序：确保触发器 → Google Sheets → 数据处理 → 返回节点的连接顺序正确。

• 测试模式限制：在 n8n 的测试模式下，表单触发器不支持查询参数预填充，需切换到生产模式才能生效。

• 数据格式：若需复杂对象，建议在 n8n 内部用 Set/Function 节点将数据格式化为扁平结构，便于前端处理。