如何将HTML表格多行数据保存到Google Sheets-js教程-PHP中文网

如何将html表格多行数据保存到google sheets

本教程详细介绍了如何解决HTML表单提交多行数据到Google Sheets时，仅第一行数据被保存的问题。核心解决方案是修改Google Apps Script，利用`e.parameters`对象处理来自HTML表单的同名多值输入，并将其转换为适合Google Sheet `setValues`方法的二维数组，从而实现一次性保存所有行数据，并提供了动态处理多列的优化方法。

引言

在使用Google Apps Script将HTML表单数据保存到Google Sheets是一种常见且强大的应用模式。然而，当HTML表单包含可动态添加的表格行（例如，用于输入多个项目或联系人信息）时，标准的Apps Script doPost函数可能只会捕获并保存第一行数据。本文将深入探讨此问题的原因，并提供一个优化的Google Apps Script解决方案，确保所有表格行的数据都能被正确地保存到Google Sheets中。

问题分析

原始的Google Apps Script通常使用 e.parameter[header] 来获取提交的表单数据。e.parameter 对象在处理具有相同 name 属性的多个HTML输入字段时，默认只会返回第一个匹配的值。例如，如果HTML中有多个字段，e.parameter['Email'] 将只获取到第一个Email输入框的值。这导致了多行数据提交时，只有第一行能够成功保存的问题。

为了解决这个问题，我们需要利用 e.parameters 对象。e.parameters 对象会返回一个包含所有同名输入字段值的数组。例如，e.parameters['Email'] 将返回一个包含所有Email输入框值的数组。我们的目标是将这些数组数据重构为Google Sheet setValues 方法所需的二维数组格式。

Google Apps Script核心修改

以下是针对 doPost 函数的修改，它将允许您的Web应用接收并处理多行数据。

1. 初始修改：处理固定列数（例如：日期、Email、姓名）

假设您的Google Sheet头部包含“Date”、“Email”和“Name”三列。原始的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])

为了处理多行数据，我们需要将其修改为：

Json Repair Kit

使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。

下载

const temp = headers.map(header => header === 'Date' ? new Date() : e.parameters[header]);
// temp 数组现在可能包含日期、以及Email和Name的数组。
// 例如：[new Date(), ["email1@example.com", "email2@example.com"], ["Name1", "Name2"]]

// 重构数据为二维数组，每一项代表一行数据
const newRows = temp[1].map((emailValue, index) => {
  // 假设Email是temp[1]，Name是temp[2]
  return [temp[0], emailValue, temp[2][index]];
});

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

代码解析：

const temp = headers.map(header => header === 'Date' ? new Date() : e.parameters[header]);：这行代码遍历Google Sheet的头部（headers）。对于“Date”列，它插入当前日期；对于其他列（如“Email”、“Name”），它从 e.parameters 中获取对应名称的所有值。由于HTML表单中具有相同 name 属性的输入会作为数组存储在 e.parameters 中，temp 数组将包含日期以及每个表单字段值的数组。
const newRows = temp[1].map((emailValue, index) => { ... });：这里我们假设 temp[1] 对应的是第一个可重复的表单字段（例如“Email”）。我们以 temp[1] 数组的长度为基准，遍历每一项。在每次迭代中，我们构建一个代表新行的数组，包含日期 (temp[0])、当前 Email 值 (emailValue) 和对应索引的 Name 值 (temp[2][index])。
sheet.getRange(nextRow, 1, newRows.length, newRows[0].length).setValues(newRows);：最后，使用 setValues 方法将生成的 newRows 二维数组写入Google Sheet。newRows.length 确定了要写入的行数，newRows[0].length 确定了要写入的列数。

2. 优化修改：动态处理更多列

如果您的HTML表单和Google Sheet需要支持更多列，并且这些列也是动态添加的，上述代码需要进一步优化，以避免硬编码 temp[2] 等索引。

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

// 假设temp[0]是日期，temp[1]是第一个多行字段（例如Email）
// 如果headers中Date不是第一列，需要调整temp[0]的获取方式
// 找到第一个作为数组的字段，以其长度为基准
const multiValueFieldIndex = temp.findIndex(item => Array.isArray(item));
if (multiValueFieldIndex === -1) {
  // 如果没有多值字段，说明只有单行数据，或数据结构不符，按单行处理
  const newRow = temp.flat(); // 展平数组，处理单行数据
  sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow]);
  return;
}

const newRows = temp[multiValueFieldIndex].map((value, index) => {
  // 构建单行数据：先加入日期（如果存在），然后遍历所有多值字段，取对应索引的值
  return headers.map((header, headerIndex) => {
    if (header === 'Date') {
      return temp[headerIndex]; // 日期是单个值
    } else {
      // 对于其他字段，从temp中取对应headerIndex的数组，并获取其index位置的值
      return temp[headerIndex][index];
    }
  });
});

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

代码解析：

此优化版本更加灵活，它首先找到 temp 数组中第一个包含多个值的字段（即一个数组），并以其长度为基准进行 map 操作。
在内部的 headers.map 中，它根据 header 名称动态地从 temp 数组中获取相应的值。如果 header 是“Date”，则直接取 temp 中对应日期的值（这是一个单值）；否则，它会从 temp 中找到对应字段的数组，并取出当前 index 的值。
这种方法避免了硬编码 temp[1], temp[2] 等，使得代码更具通用性，能够适应更多或更少的可重复列。

HTML表单要求

为了让上述Apps Script正常工作，您的HTML表单中的可重复输入字段必须具有相同的 name 属性。例如：

<tbody>
<tr>
<td contenteditable="true"> <input name="Email" type="email" placeholder="Email" required>
</td>
    <td contenteditable="true"> <input name="Name" type="name" placeholder="Name" required>
</td>
    <td class="docEdit tdDelete">X</td>
  </tr>
<!-- 动态添加的行也应保持相同的name属性 --><tr>
<td contenteditable="true"> <input name="Email" type="email" placeholder="Email" required>
</td>
    <td contenteditable="true"> <input name="Name" type="name" placeholder="Name" required>
</td>
    <td class="docEdit tdDelete">X</td>
  </tr>
</tbody>

当这些输入字段被提交时，e.parameters 对象将接收到 Email 和 Name 键对应的数组值，例如： { "Email": ["email1@example.com", "email2@example.com"], "Name": ["Name1", "Name2"] }。

部署与注意事项

Google Sheet头部匹配： 确保您的Google Sheet的第一行头部（例如“Date”、“Email”、“Name”）与HTML表单中输入字段的 name 属性以及Apps Script中处理的字段名称严格匹配。这是数据正确映射的关键。
重新部署Web应用： 在修改了Google Apps Script代码后，务必将Web应用部署为新版本。仅仅保存脚本不足以使更改生效。
- 在Apps Script编辑器中，点击“部署” > “管理部署”。
- 选择您当前的部署，点击铅笔图标进行编辑。
- 在“版本”下拉菜单中选择“新建版本”，然后点击“部署”。
- 这将更新您的Web应用，使其运行最新代码，而不会改变Web应用的URL。

完整Google Apps Script示例

结合上述优化，一个完整的Google Apps Script doPost 函数可能如下所示：

// Updated for 2021 and ES6 standards

const sheetName = 'Sheet1'
const scriptProp = PropertiesService.getScriptProperties()

function initialSetup () {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

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 => header === 'Date' ? new Date() : e.parameters[header]);

    // 找到第一个作为数组的字段，以其长度为基准来确定行数
    const multiValueFieldIndex = temp.findIndex(item => Array.isArray(item));

    let newRows = [];
    if (multiValueFieldIndex === -1) {
      // 如果没有多值字段，按单行数据处理（例如，只有Date或非重复字段）
      // 此时e.parameters可能只包含单个值或不存在
      const singleRow = headers.map(header => header === 'Date' ? new Date() : e.parameter[header]);
      newRows.push(singleRow);
    } else {
      // 根据第一个多值字段的长度，动态构建所有行数据
      newRows = temp[multiValueFieldIndex].map((value, index) => {
        return headers.map((header, headerIndex) => {
          if (header === 'Date') {
            return temp[headerIndex]; // 日期是单个值
          } else {
            // 对于其他字段，从temp中取对应headerIndex的数组，并获取其index位置的值
            // 确保temp[headerIndex]是一个数组，并且index有效
            return Array.isArray(temp[headerIndex]) ? temp[headerIndex][index] : temp[headerIndex];
          }
        });
      });
    }

    if (newRows.length > 0) {
      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.message || e })) // 捕获更详细的错误信息
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

总结

通过对Google Apps Script doPost 函数的精确修改，特别是利用 e.parameters 对象来处理HTML表单中同名多值输入，我们可以有效地将动态添加的HTML表格行数据批量保存到Google Sheets。关键在于将 e.parameters 返回的数组结构重构为Google Sheet setValues 方法所需的二维数组。同时，确保HTML表单的 name 属性与Google Sheet的头部匹配，并正确地重新部署Web应用，是此解决方案成功的关键。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！