发布于 2026-01-06 0 阅读
0

如何使用 React 读取和写入 Google Sheets

如何使用 React 读取和写入 Google Sheets

替代文字

我想使用 React 读取和写入 Google Sheets 来更新我使用Glideapps构建的应用程序的数据,Glideapps 是一个使用 Google Sheets 作为数据源的无代码应用程序构建器。

我花了好长时间才弄明白该怎么做。但事实证明,解决方法其实很简单。

TL;DR:

  1. 生成 Google 服务帐户密钥文件,获取private_keyclient_email值。
  2. 拿到你的spreadsheet_idsheet_id
  3. 使用您字段中提供的电子邮件地址,以编辑权限共享您的电子表格client_email
  4. 请确保电子表格的第一行包含标题字段。这些值将作为数据对象的“键”。
  5. 安装google-spreadsheet并使用它来连接到 Google Sheets。文档中有非常好的示例(链接在),我在本文末尾也附上了一段关于如何向电子表格追加数据的代码片段。

以下是附带截图的详细步骤说明:

1) 访问谷歌开发者控制台:
https://console.developers.google.com/

点击“选择项目”,然后点击“新建项目”,给项目命名。
替代文字
替代文字

点击“凭据”,然后点击“管理服务帐户”,再点击“创建服务帐户”。
替代文字
替代文字

添加名称和描述,然后点击“创建”。
替代文字

在“服务帐户权限”页面上,单击“继续”,这是可选的。

在“授予用户访问此服务帐户的权限”页面上,单击“完成”,因为此操作也是可选的。

点击“操作”列下的“创建密钥”。
替代文字

选择默认的“JSON”格式,Google 会将密钥文件下载到您的默认下载文件夹。
替代文字

打开JSON文件后,你会发现有两个字段需要用到:“private_key”和“client_email”。
替代文字

2) 打开你的 Google 表格,找到spreadsheet_idsheet_id
替代文字

3)重要提示:请务必将您的电子表格与密钥文件中指定的电子邮件地址共享。client_email
替代文字

你应该立即看到“已添加人员”的消息。
替代文字

4) 确保第一行包含列名
替代文字

5) Google-Spreadsheet上有很多关于如何读写电子表格的优秀示例。

以下是我编写的电子表格中用于添加新行的代码片段:



import { GoogleSpreadsheet } from "google-spreadsheet";

// Config variables
const SPREADSHEET_ID = process.env.REACT_APP_SPREADSHEET_ID;
const SHEET_ID = process.env.REACT_APP_SHEET_ID;
const CLIENT_EMAIL = process.env.REACT_APP_GOOGLE_CLIENT_EMAIL;
const PRIVATE_KEY = process.env.REACT_APP_GOOGLE_SERVICE_PRIVATE_KEY;

const doc = new GoogleSpreadsheet(SPREADSHEET_ID);

const appendSpreadsheet = async (row) => {
  try {
    await doc.useServiceAccountAuth({
      client_email: CLIENT_EMAIL,
      private_key: PRIVATE_KEY,
    });
    // loads document properties and worksheets
    await doc.loadInfo();

    const sheet = doc.sheetsById[SHEET_ID];
    const result = await sheet.addRow(row);
  } catch (e) {
    console.error('Error: ', e);
  }
};

const newRow = { Name: "new name", Value: "new value" };

appendSpreadsheet(newRow);



Enter fullscreen mode Exit fullscreen mode
文章来源:https://dev.to/calvinpak/how-to-read-write-google-sheets-with-react-193l