如何在自有网页实现从Google Sheets拉取数据到动态HTML表格

1. 直接调用Google Sheets API #

这是最直接的方案，适合公开数据场景：

• 先在Google Cloud平台创建项目，启用Sheets API，生成API密钥（如果是私有数据需要用OAuth 2.0凭据）
• 构造API请求URL，格式为：https://sheets.googleapis.com/v4/spreadsheets/{SPREADSHEET_ID}/values/{RANGE}?key={API_KEY}，替换其中的表格ID、数据范围和你的API密钥
• 用前端fetch或axios请求数据，拿到后动态生成HTML表格

示例代码片段：

// 替换成你的实际参数
const SPREADSHEET_ID = "你的表格ID";
const RANGE = "Sheet1!A1:Z";
const API_KEY = "你的API密钥";

async function loadSheetData() {
  try {
    const response = await fetch(`https://sheets.googleapis.com/v4/spreadsheets/${SPREADSHEET_ID}/values/${RANGE}?key=${API_KEY}`);
    const data = await response.json();
    const rows = data.values;
    if (!rows?.length) {
      console.log("表格无数据");
      return;
    }
    // 生成表格
    const table = document.createElement("table");
    // 表头
    const headerRow = document.createElement("tr");
    rows[0].forEach(cell => {
      const th = document.createElement("th");
      th.textContent = cell;
      headerRow.appendChild(th);
    });
    table.appendChild(headerRow);
    // 内容行
    for (let i = 1; i < rows.length; i++) {
      const row = document.createElement("tr");
      rows[i].forEach(cell => {
        const td = document.createElement("td");
        td.textContent = cell || "";
        row.appendChild(td);
      });
      table.appendChild(row);
    }
    document.getElementById("table-container").appendChild(table);
  } catch (err) {
    console.error("加载数据失败:", err);
  }
}

// 页面加载时执行
window.onload = loadSheetData;

注意：要把目标Google Sheets设置为公开可查看，否则API密钥无法访问；私有数据需要额外做OAuth身份验证，流程更复杂。

2. 搭建后端代理服务 #

如果不想暴露API密钥，或者需要处理私有数据，建议搭个简单的后端中间层：

• 后端用Node.js、PHP等语言，通过Google官方客户端库调用Sheets API获取数据
• 前端请求自己的后端接口，拿到数据后生成表格
• 这种方式更安全，还能对数据做预处理

示例Node.js后端片段（依赖express和googleapis）：

const express = require('express');
const { google } = require('googleapis');
const app = express();
const port = 3000;

// 配置服务账号密钥（从Google Cloud下载）
const auth = new google.auth.GoogleAuth({
  keyFile: 'credentials.json',
  scopes: ['https://www.googleapis.com/auth/spreadsheets.readonly'],
});
const sheets = google.sheets({ version: 'v4', auth });

// 暴露接口供前端调用
app.get('/get-sheet-data', async (req, res) => {
  try {
    const response = await sheets.spreadsheets.values.get({
      spreadsheetId: '你的表格ID',
      range: 'Sheet1!A1:Z',
    });
    res.json(response.data.values);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(port, () => {
  console.log(`代理服务运行在 http://localhost:${port}`);
});

前端只需要请求/get-sheet-data接口，逻辑和方案1类似，不用直接对接Google API。

3. 导出静态文件定时更新 #

如果数据不需要实时同步，这个方案最简单：

• 手动或用脚本定时把Google Sheets导出为JSON/CSV文件
• 把导出的文件上传到你的网站服务器
• 前端直接加载本地文件生成表格

示例加载CSV的代码（用Papa Parse简化处理）：

<!-- 引入Papa Parse CDN -->
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>

<script>
function loadCSVData() {
  Papa.parse('你的CSV文件路径', {
    download: true,
    header: true,
    complete: function(results) {
      const data = results.data;
      const headers = results.meta.fields;
      const table = document.createElement("table");
      
      // 生成表头
      const headerRow = document.createElement("tr");
      headers.forEach(header => {
        const th = document.createElement("th");
        th.textContent = header;
        headerRow.appendChild(th);
      });
      table.appendChild(headerRow);
      
      // 生成内容行
      data.forEach(row => {
        const tr = document.createElement("tr");
        headers.forEach(header => {
          const td = document.createElement("td");
          td.textContent = row[header] || "";
          tr.appendChild(td);
        });
        table.appendChild(tr);
      });
      
      document.getElementById("table-container").appendChild(table);
    }
  });
}

window.onload = loadCSVData;
</script>

这种方案不需要依赖外部API，访问速度快，适合更新频率低的场景。

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