能否将Google Sheets电子表格数据拉取至React web app？

可行性结论 #

完全可以实现，目前主流有两种技术路径，对应不同的使用场景，具体操作方法如下：

方案1：轻量无鉴权方案（适合公开非敏感表格） #

这个方案无需申请API权限，开发成本极低，操作步骤如下：

• 打开目标Google Sheets表格，点击顶部菜单栏「文件」→「共享」→「发布到网络」
• 在弹出窗口中选择要发布的工作表，格式选择「逗号分隔值(.csv)」，点击发布后拿到公开访问链接
• 在React项目中拉取CSV数据并解析即可，示例代码如下：

import { useEffect, useState } from 'react';
// 需提前安装CSV解析库：npm i papaparse
import Papa from 'papaparse';

function SheetDataComponent() {
  const [sheetData, setSheetData] = useState([]);
  // 替换为你自己的表格发布链接
  const PUBLISHED_SHEET_URL = '你的公开表格链接';

  useEffect(() => {
    fetch(PUBLISHED_SHEET_URL)
      .then(response => response.text())
      .then(csvContent => {
        // 解析CSV为带表头的JSON数组，header设为false则返回二维数组
        const parseResult = Papa.parse(csvContent, { header: true });
        setSheetData(parseResult.data);
      })
  }, []);

  // 后续可自行处理数据渲染逻辑
  return <pre>{JSON.stringify(sheetData, null, 2)}</pre>
}

该方案优缺点：无需处理鉴权逻辑，开发速度快；但要求表格公开可访问，仅支持读操作，不适合存储敏感数据

方案2：Google Sheets API 官方方案（适合权限可控、需读写的场景） #

这个方案是官方推荐的生产级方案，支持权限管控和双向读写，操作步骤如下：

• 前往Google Cloud控制台创建新项目，搜索并启用Google Sheets API，创建API密钥或者服务账号凭证
• 打开目标Google Sheets表格，点击「共享」，将服务账号邮箱添加为表格的查看者/编辑者，授予对应权限
• 在React项目中直接调用官方接口拉取数据，示例代码如下：

import { useEffect, useState } from 'react';

function OfficialSheetComponent() {
  const [sheetData, setSheetData] = useState([]);
  // 替换为你自己的API密钥
  const GOOGLE_API_KEY = '你的Google Cloud API密钥';
  // 替换为目标表格ID，可从表格URL中提取
  const SPREADSHEET_ID = '目标表格ID';
  // 替换为你要拉取的范围：工作表名!起始单元格:结束单元格
  const DATA_RANGE = 'Sheet1!A:Z';

  useEffect(() => {
    fetch(`https://sheets.googleapis.com/v4/spreadsheets/${SPREADSHEET_ID}/values/${DATA_RANGE}?key=${GOOGLE_API_KEY}`)
      .then(res => res.json())
      .then(apiResult => {
        // apiResult.values为返回的二维数组，第一行默认为表头
        setSheetData(apiResult.values || []);
      })
  }, []);

  return <pre>{JSON.stringify(sheetData, null, 2)}</pre>
}

该方案优缺点：支持权限控制，无需公开表格，可实现读写双向操作，功能完整；但需要提前配置Google Cloud相关凭证，开发成本稍高

注意：生产环境使用时不要将API密钥直接写在前端代码中，建议通过后端代理转发请求，避免密钥泄露被滥用。

内容的提问来源于stack exchange，提问作者Jore Dawal