如何从Google Spreadsheet提取数据实现HTML表单员工姓名自动填充

1. 配置Google Spreadsheet #

• 确保表格第一行为表头，包含员工工号、姓名列（与表单字段对应）
• 将表格设置为公开可查看（内部使用可改为共享给指定账号，注意数据隐私）
• 提取表格ID：在表格URL中，https://docs.google.com/spreadsheets/d/[表格ID]/edit，复制中间的ID字符串

2. 部署Google Apps Script作为Web服务 #

打开表格，点击扩展程序 -> Apps Script，替换默认代码为以下脚本：

function doGet(e) {
  // 替换为你的工作表名称，比如"员工数据清单"
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  const data = sheet.getDataRange().getValues();
  const headers = data[0];
  
  // 替换为表格实际的表头名称，确保完全匹配
  const idColIndex = headers.indexOf("员工工号");
  const nameColIndex = headers.indexOf("姓名");
  
  const employeeMap = {};
  // 从第二行开始遍历（跳过表头）
  for (let i = 1; i < data.length; i++) {
    const employeeId = data[i][idColIndex];
    const employeeName = data[i][nameColIndex];
    if (employeeId && employeeName) {
      employeeMap[employeeId] = employeeName;
    }
  }
  
  return ContentService.createTextOutput(JSON.stringify(employeeMap))
    .setMimeType(ContentService.MimeType.JSON);
}

点击部署 -> 新部署：

• 类型选择Web应用
• 执行身份选我自己
• 访问权限设为任何人，甚至匿名（如需限制访问可调整为特定用户）
• 完成部署后，复制生成的Web应用URL

3. 修改HTML表单的JS逻辑 #

替换原来的硬编码数据，改成从Web应用拉取数据并监听输入：

<!-- 你的表单结构 -->
<input type="text" id="empId" placeholder="输入员工工号">
<input type="text" id="empName" placeholder="姓名自动填充" readonly>
<input type="text" id="empPhone" placeholder="手机号">

<script>
let employeeDatabase = {};

// 页面加载时获取员工数据
async function loadEmployeeData() {
  try {
    // 替换为你复制的Web应用URL
    const res = await fetch("https://script.google.com/macros/s/[你的部署ID]/exec");
    employeeDatabase = await res.json();
  } catch (err) {
    console.error("获取员工数据失败：", err);
    alert("加载员工数据出错，请稍后重试");
  }
}

// 监听工号输入，自动填充姓名
document.getElementById("empId").addEventListener("input", function() {
  const inputId = this.value.trim();
  const matchedName = employeeDatabase[inputId] || "";
  document.getElementById("empName").value = matchedName;
  
  // 如需同时填充手机号，只需扩展Apps Script返回手机号字段，此处对应修改即可
});

// 页面初始化时加载数据
window.onload = loadEmployeeData;
</script>

4. 关键注意事项 #

• 数据隐私：若包含敏感信息（如手机号），不要设置表格公开，将Web应用访问权限限制为内部账号，且仅在可信环境使用表单
• 数据更新：修改Google Spreadsheet后，无需重新部署Web应用，下次请求会自动拉取最新数据
• 容错处理：可添加逻辑，比如输入的工号不存在时，显示"未找到该员工"的提示

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