请求协助将Google表格GAS脚本适配为Web App

1. 客户端HTML绑定按钮点击事件 #

先在Web App的HTML页面里给提交按钮绑定自定义点击函数，同时保留表单输入和文件上传控件：

<form id="dataForm">
  <!-- 替换成你的实际表单字段 -->
  <input type="text" name="userName" placeholder="输入姓名">
  <input type="text" name="userPhone" placeholder="输入手机号">
  <!-- 文件上传控件 -->
  <input type="file" id="uploadFile">
  <!-- 提交按钮，用button类型避免默认表单提交 -->
  <button type="button" onclick="triggerCSVGenerate()">生成CSV并保存</button>
</form>

2. 客户端JS处理数据校验与服务器调用 #

写客户端JavaScript函数，负责收集表单数据、校验文件是否上传，再通过google.script.run调用服务器端的GAS脚本：

function triggerCSVGenerate() {
  // 收集表单数据
  const form = document.getElementById('dataForm');
  const formData = new FormData(form);
  const userName = formData.get('userName');
  const userPhone = formData.get('userPhone');
  
  // 获取上传文件
  const fileInput = document.getElementById('uploadFile');
  const uploadedFile = fileInput.files[0];
  
  // 校验必填项
  if (!userName || !userPhone || !uploadedFile) {
    alert("请完成表单填写并上传文件");
    return;
  }
  
  // 调用服务器端GAS函数，同时绑定成功/失败回调
  google.script.run
    .withSuccessHandler((fileName) => {
      alert(`CSV已生成并保存：${fileName}`);
      form.reset(); // 重置表单
    })
    .withFailureHandler((err) => {
      alert(`生成失败：${err.message}`);
    })
    .processFormAndGenerateCSV(userName, userPhone, uploadedFile);
}

3. 服务器端GAS整合SheetToCSV与文件保存逻辑 #

把你已有的SheetToCSV逻辑和文件上传、文件夹保存逻辑整合，注意要获取表格的父文件夹：

function processFormAndGenerateCSV(userName, userPhone, uploadedFile) {
  // 1. 获取目标表格及父文件夹
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const targetSheet = ss.getActiveSheet();
  const parentFolder = DriveApp.getFileById(ss.getId()).getParents().next();
  
  // 2. 将表单数据追加到表格（如果需要留存数据）
  targetSheet.appendRow([userName, userPhone, new Date()]);
  
  // 3. 执行SheetToCSV转换逻辑
  const sheetData = targetSheet.getDataRange().getValues();
  const csvContent = sheetData.map(row => row.join(',')).join('\n');
  
  // 4. 生成CSV文件并存到父文件夹
  const csvFileName = `表单数据_${new Date().toISOString().slice(0,10)}.csv`;
  const csvFile = parentFolder.createFile(csvFileName, csvContent, MimeType.CSV);
  
  // 5. 保存上传的文件到同一文件夹
  parentFolder.createFile(uploadedFile);
  
  // 返回文件名给客户端提示
  return csvFile.getName();
}

4. Web App部署关键注意点 #

• 部署时选择**“任何人，甚至匿名用户”**（根据你的访问需求调整权限）
• 执行权限选**“以我自己的身份执行”**（需要访问你的表格和Drive文件夹）
• 每次修改脚本后，必须重新部署并更新版本，否则Web App不会同步更改

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