如何使用 React 读取和写入 Google Sheets
我想使用 React 读取和写入 Google Sheets 来更新我使用Glideapps构建的应用程序的数据,Glideapps 是一个使用 Google Sheets 作为数据源的无代码应用程序构建器。
我花了好长时间才弄明白该怎么做。但事实证明,解决方法其实很简单。
TL;DR:
- 生成 Google 服务帐户密钥文件,获取
private_key其client_email值。- 拿到你的
spreadsheet_id和sheet_id。- 使用您字段中提供的电子邮件地址,以编辑权限共享您的电子表格
client_email。- 请确保电子表格的第一行包含标题字段。这些值将作为数据对象的“键”。
- 安装google-spreadsheet并使用它来连接到 Google Sheets。文档中有非常好的示例(链接在此),我在本文末尾也附上了一段关于如何向电子表格追加数据的代码片段。
以下是附带截图的详细步骤说明:
1) 访问谷歌开发者控制台:
https://console.developers.google.com/
点击“凭据”,然后点击“管理服务帐户”,再点击“创建服务帐户”。

在“服务帐户权限”页面上,单击“继续”,这是可选的。
在“授予用户访问此服务帐户的权限”页面上,单击“完成”,因为此操作也是可选的。
选择默认的“JSON”格式,Google 会将密钥文件下载到您的默认下载文件夹。
打开JSON文件后,你会发现有两个字段需要用到:“private_key”和“client_email”。
2) 打开你的 Google 表格,找到spreadsheet_id并sheet_id
3)重要提示:请务必将您的电子表格与密钥文件中指定的电子邮件地址共享。client_email
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);






