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

将HTML表格的多行数据保存到Google Sheets是网页开发中常见的需求，通常可以通过Google Sheets提供的API接口结合前端JavaScript代码实现，整个过程分为配置Google Sheets权限、提取表格数据、调用接口上传三个核心步骤。

一、配置Google Sheets相关权限

首先需要准备一个Google Sheets表格，并开启API访问权限，具体步骤如下：

• 打开目标Google Sheets表格，点击右上角的共享按钮，将表格设置为任何人都可以编辑，或者获取特定用户的编辑权限
• 进入Google Cloud Console，创建一个新项目，启用Google Sheets API
• 创建API密钥或者OAuth 2.0客户端ID，这里如果是公开提交数据，使用API密钥即可，注意配置API密钥的访问限制，只允许调用Google Sheets API
• 记录下表格的ID，表格ID在表格链接中可以找到，格式为https://docs.google.com/spreadsheets/d/表格ID/edit

二、提取HTML表格的多行数据

假设页面中有一个如下结构的HTML表格，我们需要提取所有行的数据：

<table id="dataTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

使用JavaScript提取表格数据的代码如下：

// 获取表格元素
const table = document.getElementById('dataTable');
// 获取表头，用于确定列的顺序
const headers = [];
const headerCells = table.querySelectorAll('thead tr th');
headerCells.forEach(cell => {
  headers.push(cell.textContent.trim());
});

// 获取所有数据行
const rows = table.querySelectorAll('tbody tr');
const tableData = [];
rows.forEach(row => {
  const rowData = [];
  const cells = row.querySelectorAll('td');
  cells.forEach(cell => {
    rowData.push(cell.textContent.trim());
  });
  // 确保行数据和表头列数一致
  if (rowData.length === headers.length) {
    tableData.push(rowData);
  }
});

console.log('提取到的表格数据：', tableData);

三、调用Google Sheets API上传数据

Google Sheets API的写入接口需要按照指定格式传递数据，接口地址为https://sheets.googleapis.com/v4/spreadsheets/表格ID/values/工作表名称!A1:append?valueInputOption=RAW&key=API密钥，其中工作表名称默认是Sheet1，valueInputOption设置为RAW表示按原样写入数据。

上传数据的完整JavaScript代码如下：

// 配置参数，替换为实际的表格ID和API密钥
const SPREADSHEET_ID = '你的表格ID';
const API_KEY = '你的API密钥';
const SHEET_NAME = 'Sheet1'; // 工作表名称
const API_URL = `https://sheets.googleapis.com/v4/spreadsheets/${SPREADSHEET_ID}/values/${SHEET_NAME}!A1:append?valueInputOption=RAW&key=${API_KEY}`;

// 上传数据的函数
async function uploadTableDataToSheets() {
  // 先提取表格数据，复用之前的提取逻辑
  const table = document.getElementById('dataTable');
  const headers = [];
  const headerCells = table.querySelectorAll('thead tr th');
  headerCells.forEach(cell => {
    headers.push(cell.textContent.trim());
  });

  const rows = table.querySelectorAll('tbody tr');
  const tableData = [];
  // 先添加表头到上传数据，如果表格已经有表头可以跳过这一步
  // tableData.push(headers);
  rows.forEach(row => {
    const rowData = [];
    const cells = row.querySelectorAll('td');
    cells.forEach(cell => {
      rowData.push(cell.textContent.trim());
    });
    if (rowData.length === headers.length) {
      tableData.push(rowData);
    }
  });

  // 构造请求参数
  const requestBody = {
    values: tableData
  };

  try {
    const response = await fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(requestBody)
    });
    const result = await response.json();
    if (response.ok) {
      alert('数据上传成功，共上传' + tableData.length + '行数据');
      console.log('上传结果：', result);
    } else {
      alert('数据上传失败：' + result.error.message);
      console.error('上传错误：', result);
    }
  } catch (error) {
    alert('请求发送失败，请检查网络或配置');
    console.error('请求错误：', error);
  }
}

// 可以绑定到按钮的点击事件上
// document.getElementById('uploadBtn').addEventListener('click', uploadTableDataToSheets);

四、常见问题说明

• 如果上传时提示权限错误，需要检查API密钥是否正确，以及Google Sheets表格的共享权限是否开启
• 如果表格数据包含特殊字符，不需要额外处理，RAW模式下会原样写入
• 如果需要上传大量数据，建议分批上传，避免单次请求数据量过大导致失败
• 如果表格的工作表名称不是默认的Sheet1，需要修改代码中的SHEET_NAME参数为实际的工作表名称

HTML_tableGoogle_Sheets_APIJavaScriptFetch_API修改时间：2026-07-07 19:06:26