如何通过Google APIs实现React应用与Google Sheets对接？求免费方案

1. 直接调用Google Sheets公开表格接口（无需第三方工具） #

把Google Sheets设置为公开可查看后，就能通过官方提供的接口直接获取数据，完全免费且无请求额度限制（只要表格访问量在Google的合理范围内）。

操作步骤： #

• 打开你的Google Sheet，点击右上角「共享」，设置权限为「知道链接的任何人都可查看」
• 复制浏览器地址栏中的表格ID（即https://docs.google.com/spreadsheets/d/{这里是ID}/edit中的部分）
• 在React中用fetch或axios请求以下接口：

  https://docs.google.com/spreadsheets/d/{SPREADSHEET_ID}/gviz/tq?tqx=out:json
  

React示例代码： #

import { useEffect, useState } from 'react';

function SheetData() {
  const [data, setData] = useState([]);
  const SPREADSHEET_ID = '你的表格ID';

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`https://docs.google.com/spreadsheets/d/${SPREADSHEET_ID}/gviz/tq?tqx=out:json`);
      const text = await response.text();
      // 解析返回的非标准JSON格式
      const jsonData = JSON.parse(text.substring(47).slice(0, -2));
      // 转换为结构化数据
      const rows = jsonData.table.rows.map(row => {
        return row.c.reduce((acc, cell, index) => {
          acc[jsonData.table.cols[index].label] = cell?.v || '';
          return acc;
        }, {});
      });
      setData(rows);
    };

    fetchData();
  }, []);

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>{item.列名1}: {item.列名2}</div>
      ))}
    </div>
  );
}

export default SheetData;

2. 用Google Apps Script搭建自定义API #

通过Google Apps Script可以为你的Sheet创建一个自定义的REST API，完全免费，且额度足够个人项目使用。

操作步骤： #

1. 在Google Sheet中，点击顶部菜单「扩展程序」→「Apps脚本」
2. 清空默认代码，粘贴以下脚本：

function doGet(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('你的工作表名称'); // 替换为你的工作表名
  const data = sheet.getDataRange().getValues();
  const headers = data[0];
  const rows = data.slice(1).map(row => {
    const obj = {};
    headers.forEach((header, index) => {
      obj[header] = row[index];
    });
    return obj;
  });
  return ContentService.createTextOutput(JSON.stringify(rows))
    .setMimeType(ContentService.MimeType.JSON);
}

3. 点击「部署」→「新部署」，选择「类型」为「Web应用」：
   • 执行权限：「我自己」
   • 谁可以访问：「任何人，甚至匿名」
   • 点击部署，复制生成的Web应用URL

React中调用示例： #

import { useEffect, useState } from 'react';

function CustomApiData() {
  const [data, setData] = useState([]);
  const API_URL = '你的Apps Script部署URL';

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(API_URL);
      const jsonData = await response.json();
      setData(jsonData);
    };
    fetchData();
  }, []);

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>{item.列名1}: {item.列名2}</div>
      ))}
    </div>
  );
}

export default CustomApiData;

3. 使用Tabletop.js库（轻量前端工具） #

Tabletop.js是一个专门用于解析Google Sheets数据的前端库，免费且易集成，适合快速开发。

操作步骤： #

• 在React项目中安装Tabletop：

npm install tabletop --save

React示例代码： #

import { useEffect, useState } from 'react';
import Tabletop from 'tabletop';

function TabletopData() {
  const [data, setData] = useState([]);
  const SPREADSHEET_KEY = '你的表格ID';

  useEffect(() => {
    Tabletop.init({
      key: SPREADSHEET_KEY,
      callback: (data) => {
        setData(data);
      },
      simpleSheet: true // 仅读取第一个工作表
    });
  }, []);

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>{item.列名1}: {item.列名2}</div>
      ))}
    </div>
  );
}

export default TabletopData;

注意：使用Tabletop.js时，同样需要先将Google Sheets设置为「知道链接的任何人都可查看」权限。

内容的提问来源于stack exchange，提问作者Kelsey Krantz