如何在Google Apps Script中将code.gs变量传递到success.html页面

问题描述 #

在code.gs的doPost函数中生成了serialNumber变量，希望表单提交后能在success.html页面中展示该值，但目前直接使用<?= serialNumber ?>无法获取到变量。

解决方案 #

步骤1：修改code.gs，在响应中包含serialNumber #

无论是否上传文件，都要将serialNumber加入返回的JSON响应对象，确保前端能拿到该值；同时修改doGet函数，接收URL参数并传递给HTML模板：

function doPost(e) {
  const folderId = "root"; // 可替换为目标文件夹ID
  const sheetId = "<sheetid>"; // 替换为你的表格ID
  const sheet = SpreadsheetApp.openById(sheetId).getSheetByName("sheet1"); 

  const name = e.parameter.name;
  const email = e.parameter.email;
  const file = e.postData.contents ? Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename) : null;

  var currentDate = new Date();
  var month = currentDate.toLocaleString('default', { month: 'short' });
  var year = currentDate.getFullYear().toString().substr(-2);
  
  var serialNumber = 'D' + month + year + pad(sheet.getLastRow() + 1, 4);
  function pad(num, length) {
    var str = num.toString();
    while (str.length < length) {
      str = '0' + str;
    }
    return str;
  }

  if (file) {
    const uploadedFile = DriveApp.getFolderById(folderId).createFile(file);
    // 新增serialNumber到响应对象
    const responseObj = { 
      filename: uploadedFile.getName(), 
      fileId: uploadedFile.getId(), 
      fileUrl: uploadedFile.getUrl(), 
      name: name, 
      email: email,
      serialNumber: serialNumber
    };

    sheet.appendRow([serialNumber, name, email, uploadedFile.getUrl()]);
    return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON);
  } else {
    sheet.appendRow([serialNumber, name, email, ""]); 
    // 新增serialNumber到响应对象
    return ContentService.createTextOutput(JSON.stringify({ 
      name: name, 
      email: email,
      serialNumber: serialNumber
    })).setMimeType(ContentService.MimeType.JSON);
  }
}

// 修改doGet，接收URL参数并传递给HTML模板
function doGet(e) {
  const template = HtmlService.createTemplateFromFile("success.html");
  template.serialNumber = e.parameter.serialNumber || "无序列号";
  return template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

步骤2：修改success.html，接收模板变量 #

保留模板语法，直接渲染传递过来的serialNumber：

<!DOCTYPE html>
<html>
  <head>
    <title>感谢提交！</title>
  </head>
  <body>
    <h1>感谢您提交表单！</h1>
    <h2>您的序列号：<?= serialNumber ?></h2>
  </body>
</html>

步骤3：补充前端表单提交逻辑 #

通过异步请求提交表单，拿到响应中的serialNumber后，跳转到success页面并携带该参数：

<!DOCTYPE html>
<html>
<head>
  <title>提交表单</title>
</head>
<body>
  <form id="submitForm">
    <input type="text" name="name" placeholder="姓名" required>
    <input type="email" name="email" placeholder="邮箱" required>
    <input type="file" name="file">
    <button type="submit">提交</button>
  </form>

  <script>
    document.getElementById('submitForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const response = await fetch('<你的脚本部署URL>', {
        method: 'POST',
        body: formData
      });
      const result = await response.json();
      // 跳转时携带serialNumber参数
      window.location.href = '<你的脚本部署URL>?serialNumber=' + encodeURIComponent(result.serialNumber);
    });
  </script>
</body>
</html>

说明 #

异步提交表单后，通过URL参数将serialNumber传递给doGet函数，doGet再将变量注入HTML模板，最终在success页面渲染显示。若不需要暴露URL参数，也可使用SessionStorage存储序列号后在success页面读取。

内容的提问来源于stack exchange，提问作者Sandeep