HTML表格数据存入GoogleSheet教程

文章不知道大家是否熟悉？今天我将给大家介绍《HTML表格数据保存到Google Sheet方法》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

本文详细介绍了如何解决HTML表单动态多行数据（如表格行项目）提交到Google Sheet时，仅首行数据被保存的问题。通过修改Google Apps Script，利用`e.parameters`对象处理同名输入字段的数组值，并重构数据以支持多行写入，从而实现将整个HTML表格的行数据批量保存到Google Sheet，并提供了处理动态列的优化方案，确保数据提交的完整性和准确性。

引言

在使用Google Apps Script作为Web App后端，接收HTML表单数据并将其保存到Google Sheet是一种常见的应用模式。然而，当HTML表单包含动态生成的多个行（例如，用户可以添加更多商品项的表格）时，开发者可能会遇到一个问题：尽管HTML表单提交了多行数据，但Google Sheet中却只保存了第一行数据。本文旨在深入探讨这一问题的原因，并提供一个完善的解决方案，确保所有提交的行数据都能被准确无误地保存。

问题分析

在HTML表单中，当存在多个<input>元素拥有相同的name属性时（例如，多个商品行的name="item_name"），标准的HTTP POST请求会将这些值作为数组发送。Google Apps Script在处理doPost(e)事件时，e对象提供了两种访问请求参数的方式：

• e.parameter：此对象会尝试将同名参数的值合并为一个字符串，或者仅返回第一个值，这取决于参数的解析方式。对于多个同名输入，它通常只会捕获到第一个值。
• e.parameters：此对象则会返回一个包含所有同名参数值的数组。

原始的Google Apps Script代码通常使用e.parameter[header]来获取每个字段的值。当HTML表单提交了多行数据时，例如：

<!-- 第一行 -->
&lt;input name=&quot;Email&quot; type=&quot;email&quot; value=&quot;email1@example.com&quot;&gt;
&lt;input name=&quot;Name&quot; type=&quot;name&quot; value=&quot;Name1&quot;&gt;
<!-- 第二行 -->
&lt;input name=&quot;Email&quot; type=&quot;email&quot; value=&quot;email2@example.com&quot;&gt;
&lt;input name=&quot;Name&quot; type=&quot;name&quot; value=&quot;Name2&quot;&gt;

在doPost(e)函数中，e.parameter["Email"]可能只返回"email1@example.com"，而e.parameters["Email"]则会返回["email1@example.com", "email2@example.com"]。因此，要正确处理多行数据，核心在于切换到e.parameters并正确地重构数据。

Google Apps Script解决方案

为了解决上述问题，我们需要修改doPost函数中的数据处理逻辑。

原始Apps Script代码片段

以下是原始Apps Script中与数据处理相关的代码片段：

const newRow = headers.map(function(header) {
  return header === 'Date' ? new Date() : e.parameter[header]
})

sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

这段代码的问题在于使用了e.parameter[header]，并且setValues方法被调用时，期望写入单行数据（[newRow]）。

解决方案一：固定列数处理

如果Google Sheet的列是固定的（例如，只有"Date"、"Email"和"Name"三列），我们可以精确地构建多行数据。

修改后的Apps Script代码：

const temp = headers.map(header => header === 'Date' ? new Date() : e.parameters[header]);
// temp 数组结构示例：[Date对象, ["email1", "email2"], ["name1", "name2"]]
// 假设Google Sheet的列顺序是 Date, Email, Name

const newRows = temp[1].map((emailValue, index) => {
  // 构建每一行数据
  return [
    temp[0], // Date (所有行共享同一个提交日期)
    emailValue, // 当前行的Email
    temp[2][index] // 当前行的Name
  ];
});

// 将多行数据写入Google Sheet
sheet.getRange(nextRow, 1, newRows.length, newRows[0].length).setValues(newRows);

代码解释：

1. const temp = headers.map(...)：
   • headers是从Google Sheet第一行获取的列标题数组。
   • 对于'Date'列，我们插入一个new Date()对象。
   • 对于其他列（如"Email", "Name"），我们使用e.parameters[header]来获取一个包含所有提交值的数组。
   • 此时temp数组的结构会是：[Date对象, ["email1", "email2", ...], ["name1", "name2", ...]]。
   • 重要提示： temp数组的索引（temp[0], temp[1], temp[2]等）与Google Sheet的列顺序以及HTML表单中输入字段的name属性顺序相关。请确保您的Google Sheet列顺序与此逻辑匹配。例如，如果Sheet的标题是"Date", "Email", "Name"，那么temp[0]是Date，temp[1]是Email数组，temp[2]是Name数组。
2. const newRows = temp[1].map(...)：
   • 我们以temp[1]（例如，Email数组）为基准，遍历其所有元素。
   • 对于每个元素（即每一行的Email值），我们构建一个代表Google Sheet中新的一行数据的数组。
   • temp[0]是所有行共用的提交日期。
   • emailValue是当前循环到的Email值。
   • temp[2][index]是对应索引的Name值。
3. sheet.getRange(nextRow, 1, newRows.length, newRows[0].length).setValues(newRows)：
   • nextRow是Google Sheet中下一行可用的行号。
   • 1表示从第一列开始写入。
   • newRows.length指定了要写入的行数（即提交的表格行数）。
   • newRows[0].length指定了要写入的列数（即每行的字段数）。
   • setValues(newRows)接收一个二维数组，其中每个内部数组代表Google Sheet中的一行数据。

解决方案二：动态列数处理

如果HTML表单的列数可能变化，或者您希望Apps Script能更灵活地适应Google Sheet的列结构，可以使用更通用的方法。

修改后的Apps Script代码：

const temp = headers.map(header => header === 'Date' ? new Date() : e.parameters[header]);
// temp 数组结构示例：[Date对象, ["email1", "email2"], ["name1", "name2"], ["col4_val1", "col4_val2"], ...]

const newRows = temp[1].map((firstColumnValue, index) => {
  // 构建每一行数据，从第一个动态列开始，依次获取对应索引的值
  return [
    temp[0], // Date
    firstColumnValue, // 第一个动态列（例如Email）的值
    ...temp.slice(2).map(columnArray => columnArray[index]) // 展开后续所有动态列的值
  ];
});

sheet.getRange(nextRow, 1, newRows.length, newRows[0].length).setValues(newRows);

代码解释：

1. temp.slice(2).map(columnArray => columnArray[index])：
   • temp.slice(2)：从temp数组的第三个元素开始（即跳过Date和第一个动态列，如Email），获取所有后续的列数组。
   • map(columnArray => columnArray[index])：对于每一个后续的列数组，提取其在当前index位置的值。
   • ...展开运算符：将这些提取出的值作为独立的元素添加到当前行数组中。
2. 这个方案假设temp[0]是Date，temp[1]是第一个动态列（例如Email），而temp[2]及以后是其他动态列。请确保您的HTML表单输入name属性与Google Sheet的headers顺序一致。

HTML结构注意事项

为了使上述Apps Script能够正确捕获多行数据，HTML表单中的每个可重复行中的输入字段必须具有相同的name属性。例如，在提供的HTML代码中：

<tbody>
  <tr>
    <td contenteditable="true" name="Email">  &lt;input name=&quot;Email&quot; type=&quot;email&quot; placeholder=&quot;Email&quot; required&gt;</td>
    <td contenteditable="true" name="Name">
      &lt;input name=&quot;Name&quot; type=&quot;name&quot; placeholder=&quot;Name&quot; required&gt;
    </td>
    <td class="docEdit tdDelete">X</td>
  </tr>
</tbody>

这里的input元素已经正确地使用了name="Email"和name="Name"。当通过JavaScript克隆行时，新创建的行也会包含这些同名输入。这是e.parameters能够工作的基础。

部署与版本管理

非常重要： 每次修改Google Apps Script代码后，尤其是涉及到Web App的逻辑更改时，必须重新部署Web App，并选择一个新的版本。否则，您的更改将不会反映在已发布的Web App中。

1. 在Apps Script编辑器中，点击“部署” -> “新建部署”。
2. 选择部署类型（通常是“Web 应用”）。
3. 确保“版本”下拉菜单中选择“新建版本”。
4. 点击“部署”。

总结

通过将Google Apps Script中的数据获取方式从e.parameter切换到e.parameters，并相应地调整数据重构逻辑，我们可以有效地解决HTML表单多行数据仅保存首行的问题。无论是固定列还是动态列，上述解决方案都能提供 robust 的数据处理能力，确保您的Web App能够完整、准确地将用户提交的表格数据保存到Google Sheet中。请务必注意Google Sheet的列标题与HTML表单输入name属性的对应关系，并遵循Web App的部署规范。

终于介绍完啦！小伙伴们，这篇关于《HTML表格数据存入GoogleSheet教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！