使用JavaScript和Apps脚本将数据从网站发送到Google电子表格-DEV365 开发者社区

存储用户数据的常见方法之一是通过Web表单。但是，管理收集的数据可能耗时且具有挑战性，尤其是当您拥有大量数据时。幸运的是，使用Google电子表格，您可以轻松存储和管理数据。在本教程中，我们将向您展示如何使用JavaScript和Apps脚本向Google电子表格发送网站表单。

步骤1：创建Google电子表格

开始，创建一个新的Google电子表格。您可以通过转到Google Drive并单击“新”按钮来创建新的电子表格。从下拉菜单中，选择“ Google Sheets”。

步骤2：设置电子表格

创建了一个新的电子表格后，设置与表单字段相对应的列。例如，如果您的表格具有“名称”，“电子邮件”和“消息”字段，则应在电子表格中使用相同的标题创建三列。

步骤3：创建一个新的Google Apps脚本

接下来，您需要创建一个新的Google Apps脚本。为此，请单击电子表格中的“工具”菜单，然后选择“脚本编辑器”。一个新标签将使用空白脚本打开。

步骤4：添加代码

现在，是时候将代码添加到您的Google Apps脚本了。用以下代码替换脚本编辑器中的默认代码：

var TO_ADDRESS = "youremail@gmail.com";

function formatMailBody(obj, order) {
  var result = "";
  if (!order) {
    order = Object.keys(obj);
  }

  for (var idx in order) {
    var key = order[idx];
    result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + sanitizeInput(obj[key]) + "</div>";

  }
  return result; 
}

function sanitizeInput(rawInput) {
   var placeholder = HtmlService.createHtmlOutput(" ");
   placeholder.appendUntrusted(rawInput);

   return placeholder.getContent();
 }

function doPost(e) {

  try {
    Logger.log(e);
    record_data(e);

    var mailData = e.parameters;

    var orderParameter = e.parameters.formDataNameOrder;
    var dataOrder;
    if (orderParameter) {
      dataOrder = JSON.parse(orderParameter);
    }

    var sendEmailTo = (typeof TO_ADDRESS !== "undefined") ? TO_ADDRESS : mailData.formGoogleSendEmail;

    if (sendEmailTo) {
      MailApp.sendEmail({
        to: String(sendEmailTo),
        subject: "Contact form submitted",
        htmlBody: formatMailBody(mailData, dataOrder)
      });
    }

    return ContentService
          .createTextOutput(
            JSON.stringify({"result":"success",
                            "data": JSON.stringify(e.parameters) }))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(error) {
    Logger.log(error);
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": error}))
          .setMimeType(ContentService.MimeType.JSON);
  }
}

function record_data(e) {
  var lock = LockService.getDocumentLock();
  lock.waitLock(30000);
  try {
    Logger.log(JSON.stringify(e)); 
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    var sheetName = e.parameters.formGoogleSheetName || "responses";
    var sheet = doc.getSheetByName(sheetName);

    var oldHeader = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var newHeader = oldHeader.slice();
    var fieldsFromForm = getDataColumns(e.parameters);
    var row = [new Date()];
    for (var i = 1; i < oldHeader.length; i++) {
      var field = oldHeader[i];
      var output = getFieldFromData(field, e.parameters);
      row.push(output);
      var formIndex = fieldsFromForm.indexOf(field);
      if (formIndex > -1) {
        fieldsFromForm.splice(formIndex, 1);
      }
    }
    for (var i = 0; i < fieldsFromForm.length; i++) {
      var field = fieldsFromForm[i];
      var output = getFieldFromData(field, e.parameters);
      row.push(output);
      newHeader.push(field);
    }

    var nextRow = sheet.getLastRow() + 1;
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
    if (newHeader.length > oldHeader.length) {
      sheet.getRange(1, 1, 1, newHeader.length).setValues([newHeader]);
    }
  }
  catch(error) {
    Logger.log(error);
  }
  finally {
    lock.releaseLock();
    return;
  }

}

function getDataColumns(data) {
  return Object.keys(data).filter(function(column) {
    return !(column === 'formDataNameOrder' || column === 'formGoogleSheetName' || column === 'formGoogleSendEmail' || column === 'honeypot');
  });
}

function getFieldFromData(field, data) {
  var values = data[field] || '';
  var output = values.join ? values.join(', ') : values;
  return output;
}

步骤5：将脚本发布为Web应用程序

最后一步是将脚本发布为Web应用程序。为此，请单击脚本编辑器中的“发布”菜单，然后选择“部署为Web应用程序”。您需要授予访问Google电子表格的必要权限。

步骤6：将表单连接到Google Apps脚本

最后，您需要将表单连接到Google Apps脚本。您可以通过将简单的JavaScript添加到您的表单中，该表格将调用Google Apps脚本并提交表单数据。将以下代码添加到您的表格：

<script>
    $("#submit-form").submit((e) => {
      e.preventDefault();
      $.ajax({
        url: "your exec id",
        data: $("#submit-form").serialize(),
        method: "post",
        success: function (response) {
          document.getElementById("submit-form").reset();
          document.getElementById("outputMessage").classList.add('success');
          document.getElementById("outputMessage").innerHTML = "You have been added to our mailing list successfully";
          return false
        },
        error: function (err) {
          document.getElementById("outputMessage").classList.add('fail');
          document.getElementById("outputMessage").innerHTML = "Our Server is busy right now. Try again later!"
          return false
        },
      });
    });
  </script>

就是这样！您已经使用JavaScript和应用程序脚本成功地在表单和Google电子表格之间建立了连接。每次用户提交您的表格时，数据都会自动添加到Google电子表格中，您可以轻松地管理它。

结论，使用Google电子表格存储从Web收集的用户数据