HTML表格导入GoogleSheet方法详解

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《HTML表格数据导入Google Sheet教程》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

本教程详细介绍了如何将包含动态添加行的HTML表单数据完整保存到Google Sheet。针对仅能保存首行数据的问题，核心解决方案是修改Google Apps Script，利用`e.parameters`（复数形式）来捕获所有同名输入字段的值，并重构数据以适应多行写入。文章还涵盖了如何扩展以支持更多列，并强调了部署Web App时的版本管理重要性。

在构建Web应用程序时，将前端HTML表单数据提交到后端存储（如Google Sheet）是一种常见需求。当HTML表单包含可动态添加的表格行时，传统的Google Apps Script处理方式可能只会捕获到第一个同名字段的值，导致多行数据丢失。本教程将深入探讨这一问题，并提供一个基于Google Apps Script的解决方案，确保所有表格行的数据都能被正确保存。

理解问题根源

最初的问题在于，当HTML表单中存在多个具有相同name属性的输入字段时（例如，多个Email和Name字段，每个表格行一个），Google Apps Script的doPost(e)函数通过e.parameter[header]访问数据时，只会获取到第一个匹配项的值。为了捕获所有同名字段的值，我们需要使用e.parameters[header]，它会返回一个包含所有匹配值的数组。

初始Google Apps Script配置

以下是原始的Google Apps Script doPost 函数示例，它旨在处理单行数据：

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    // 问题所在：e.parameter[header] 仅获取第一个值
    const newRow = headers.map(function(header) {
      return header === 'Date' ? new Date() : e.parameter[header]
    })

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

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }
  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }
  finally {
    lock.releaseLock()
  }
}

解决方案：处理多行数据

为了解决上述问题，我们需要对doPost函数进行关键修改，使其能够识别并处理e.parameters返回的数组。修改后的脚本将遍历这些数组，将每行数据重构为一个独立的数组，最终形成一个二维数组，一次性写入Google Sheet。

修改后的Google Apps Script代码：

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    // 核心修改：使用 e.parameters 获取所有值，并重构数据
    // 假设您的Google Sheet表头顺序为：Date, Email, Name
    const temp = headers.map(header => {
      // 如果是Date列，则生成当前日期，否则从e.parameters获取对应数据
      return header === 'Date' ? new Date() : e.parameters[header];
    });

    // 根据temp数组重构为适合写入多行的二维数组
    // temp[0] 对应 Date，temp[1] 对应 Email 数组，temp[2] 对应 Name 数组
    const newRows = temp[1].map((email, i) => [temp[0], email, temp[2][i]]);

    // 使用 newRows.length 写入多行
    sheet.getRange(nextRow, 1, newRows.length, newRows[0].length).setValues(newRows);

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }
  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }
  finally {
    lock.releaseLock()
  }
}

代码解析：

1. const temp = headers.map(...): 这一步遍历Google Sheet的表头。
   • 对于Date列，它会生成一个新的日期对象。
   • 对于其他列（如Email、Name），它会从e.parameters中获取所有同名字段的值，e.parameters[header]将返回一个数组。
   • 因此，temp数组将包含[new Date(), ['email1', 'email2', ...], ['name1', 'name2', ...]]这样的结构。
2. const newRows = temp[1].map((email, i) => [temp[0], email, temp[2][i]]);: 这是将temp重构为二维数组的关键步骤。
   • 我们以temp[1]（即所有Email地址的数组）为基础进行映射。
   • 对于每个Email (email) 及其索引 (i)，我们创建一个新的行数组：[temp[0], email, temp[2][i]]。
     • temp[0]是日期（所有行共享同一日期）。
     • email是当前行的Email。
     • temp[2][i]是当前行对应的Name。
   • 最终，newRows将是一个二维数组，每个子数组代表Google Sheet中的一行数据。
3. sheet.getRange(nextRow, 1, newRows.length, newRows[0].length).setValues(newRows);:
   • setValues()方法现在接收newRows这个二维数组，一次性写入多行数据。
   • newRows.length指定了要写入的行数。
   • newRows[0].length指定了要写入的列数。

重要注意事项：

• 表头顺序匹配： 上述修改假设您的Google Sheet表头顺序严格为 Date, Email, Name。如果顺序不同，您需要相应调整newRows的构建逻辑。
• HTML Input name属性： 确保您的HTML input 元素的name属性与Google Sheet的表头完全一致。例如：<input name="Email" type="email">。

扩展支持更多列

如果您需要添加更多列（例如Address），只需进一步修改newRows的构建逻辑。

修改后的Google Apps Script代码（支持更多列）：

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    const temp = headers.map(header => {
      return header === 'Date' ? new Date() : e.parameters[header];
    });

    // 动态处理更多列
    // temp[0] 仍为 Date
    // temp[1] 为 Email 数组
    // temp.slice(2) 则包含了 Name, Address 等后续列的数组
    const newRows = temp[1].map((email, i) => [
      temp[0], // Date
      email,    // Email
      ...temp.slice(2).map(colData => colData[i]) // 动态添加 Name, Address 等列的数据
    ]);

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

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }
  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }
  finally {
    lock.releaseLock()
  }
}

代码解析：

• ...temp.slice(2).map(colData => colData[i]):
  • temp.slice(2)会从temp数组的第三个元素开始（即跳过Date和Email）创建一个新数组。这个新数组中的每个元素都是一个包含相应列所有数据的数组（例如，['name1', 'name2'], ['address1', 'address2']）。
  • map(colData => colData[i])则遍历这些列数据数组，并为当前行 (i) 提取出对应列的值。
  • ... 展开运算符将这些提取出的值作为独立的元素添加到当前行数组中。

重要提示：

• 使用此扩展方案时，您的HTML表单和Google Sheet的表头都必须已经更新，以包含所有您希望保存的额外列。
• HTML中的动态行添加逻辑（如$(this).parents('table').find('tbody').append( $(this).parents('table').find('tbody tr:last-child').clone() );）需要确保新克隆的行中的input元素也带有正确的name属性。

HTML表单结构示例

为了使上述Apps Script正常工作，您的HTML表单需要确保每个可编辑的输入字段都具有name属性，且这些属性与Google Sheet的表头相匹配。

<form method="POST" action="YOUR_WEB_APP_URL">
  <table class="proposedWork" width="100%" style="margin-top:20px">
    <thead>
      <th>Email</th>
      <th>Name</th>
      <!-- <th>Address</th> (如果需要更多列) -->
      <th class="docEdit trAdd">+</th>
    </thead>
    <tbody>
      <tr>
        <td>&lt;input name=&quot;Email&quot; type=&quot;email&quot; placeholder=&quot;Email&quot; required&gt;</td>
        <td>&lt;input name=&quot;Name&quot; type=&quot;text&quot; placeholder=&quot;Name&quot; required&gt;</td>
        <!-- <td>&lt;input name=&quot;Address&quot; type=&quot;text&quot; placeholder=&quot;Address&quot;&gt;</td> (如果需要更多列) -->
        <td class="docEdit tdDelete">X</td>
      </tr>
    </tbody>
  </table>
  <button type="submit">Send</button>
</form>

部署Web App注意事项

每次修改Google Apps Script代码后，为了让更改生效，您必须重新部署Web App，并且通常建议部署为新版本。

1. 在Apps Script编辑器中，点击“部署” -> “新建部署”。
2. 选择部署类型为“Web 应用”。
3. 填写描述（可选），确保“执行身份”设置为“我”（您的账号），“有权访问者”设置为“任何人”。
4. 点击“部署”。
5. 如果已有部署，选择“管理部署”，点击铅笔图标编辑现有部署，然后在“版本”下拉菜单中选择“新建版本”，然后点击“部署”。

这将确保您的Web App URL保持不变，但后端脚本已更新为最新版本。

总结

通过对Google Apps Script中的doPost函数进行细致的修改，特别是将e.parameter替换为e.parameters并重构数据，我们可以有效地将HTML表单中动态添加的多行数据完整地保存到Google Sheet。理解e.parameters的工作原理以及如何将扁平化的输入数据转换为适合写入Google Sheet的二维数组，是解决此类问题的关键。同时，确保HTML表单的name属性与Google Sheet的表头一致，并在每次脚本修改后正确部署Web App，是保证系统正常运行的重要环节。

好了，本文到此结束，带大家了解了《HTML表格导入GoogleSheet方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！