如何将HTML表格多行数据保存到Google Sheet

将HTML表格多行数据保存到Google Sheet，核心思路是先在前端提取表格的所有行数据并转换为合适的格式，再通过Google Apps Script搭建的服务接口将数据写入到指定的Google Sheet中，整个过程不需要复杂的后端服务，仅依靠前端和Google提供的轻量脚本即可完成。

前端提取HTML表格多行数据

首先需要获取HTML表格中的所有行数据，排除表头后整理成数组格式，方便后续提交。假设页面中有一个id为data_table的表格，结构如下：

<table id="data_table" border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>28</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>
<button onclick="submitTableData()">保存数据到Google Sheet</button>

提取数据的JavaScript代码如下：

function getTableData() {
  // 获取表格元素
  const table = document.getElementById('data_table');
  // 获取所有tbody中的行
  const rows = table.querySelectorAll('tbody tr');
  const tableData = [];
  rows.forEach(row => {
    const cells = row.querySelectorAll('td');
    // 提取每行的单元格内容，组成数组
    const rowData = Array.from(cells).map(cell => cell.textContent.trim());
    if (rowData.length > 0) {
      tableData.push(rowData);
    }
  });
  return tableData;
}

配置Google Apps Script接收接口

Google Apps Script是Google提供的轻量脚本服务，可以直接操作Google Sheet，不需要额外搭建后端。步骤如下：

• 打开目标Google Sheet，点击顶部菜单栏的扩展程序，选择Apps 脚本
• 在脚本编辑器中删除默认代码，粘贴以下脚本：

// 处理POST请求，接收前端提交的数据
function doPost(e) {
  try {
    // 解析前端提交的JSON数据
    const data = JSON.parse(e.postData.contents);
    const sheetData = data.sheetData;
    // 获取当前表格的第一个工作表
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
    // 遍历数据，逐行写入表格
    sheetData.forEach(row => {
      sheet.appendRow(row);
    });
    // 返回成功响应
    return ContentService.createTextOutput(JSON.stringify({
      status: 'success',
      message: '数据保存成功'
    })).setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    // 返回错误响应
    return ContentService.createTextOutput(JSON.stringify({
      status: 'error',
      message: error.message
    })).setMimeType(ContentService.MimeType.JSON);
  }
}

// 处理OPTIONS请求，解决跨域问题
function doOptions(e) {
  const header = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type'
  };
  return ContentService.createTextOutput('').setHeaders(header);
}

• 点击编辑器顶部的部署按钮，选择新建部署，部署类型选择网络应用
• 设置执行身份为我，访问权限为任何人，点击部署后复制生成的网络应用URL，这个就是前端提交数据的接口地址

前端提交数据到Google Sheet

拿到Google Apps Script的接口地址后，就可以在前端调用接口提交表格数据了，代码如下：

function submitTableData() {
  // 获取表格数据
  const tableData = getTableData();
  if (tableData.length === 0) {
    alert('表格中没有可提交的数据');
    return;
  }
  // 替换为你的Google Apps Script网络应用URL
  const apiUrl = 'https://script.google.com/macros/s/xxxxxx/exec';
  // 发送POST请求
  fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      sheetData: tableData
    })
  })
  .then(response => response.json())
  .then(result => {
    if (result.status === 'success') {
      alert('表格数据已成功保存到Google Sheet');
    } else {
      alert('保存失败：' + result.message);
    }
  })
  .catch(error => {
    alert('请求出错：' + error.message);
  });
}

注意事项

• Google Apps Script的部署需要保证脚本有操作当前Sheet的权限，首次运行时会要求授权，按照提示完成授权即可
• 如果表格数据量较大，建议分批提交，避免单次请求数据过大导致失败
• 跨域问题如果仍然存在，可以检查Google Apps Script中的doOptions函数配置是否正确，确保响应头包含允许的跨域规则
• 提交的数据格式需要和Google Sheet的列对应，避免数据错位

HTML表格Google_Sheet前端数据提交Google_Apps_Script数据同步修改时间：2026-06-25 23:33:42