浏览器端用Google Sheets API更新表格报400错误及创建疑问

问题背景 #

我有如下动态结构的数据表（列数、行数不固定）：

const tableInfo = [
  ["Name", "Age", "Score", "Date", "Tags"],
  ["Name1", "30", "2050", "13-12-2011", "First"],
  ["Name2", "40", "250", "11-12-2001", "First"],
  ["Name3", "35", "1345", "13-02-2011", "Second"]
]

已成功用以下代码创建指定标题和工作表的表格：

const initialData = {
  properties: {
    title: `${fileName}`
  },
  sheets: [{
    properties: {
      title: `${sheetName}`
    },
  }, ],
};
fetch("https://sheets.googleapis.com/v4/spreadsheets", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify(initialData),
  })
  .then((doc) => doc.json())
  .then((doc) => console.log("Doc Created!"))
  .catch((error) => console.log("error"));

但后续更新数据时返回400错误，更新代码如下：

var docId = doc.spreadsheetId;
var sheetId = doc.sheets[0].properties.sheetId;
var sheetData = [];
sheetData.push({
  range: {
    sheetId: sheetId
  },
  values: tableInfo,
});
var sheetBody = {
  data: sheetData,
  valueInputOption: "RAW",
};
fetch(`https://sheets.googleapis.com/v4/spreadsheets/${docId}:batchUpdate`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${token}`,
      Accept: "application/json",
    },
    body: sheetBody,
  })
  .then((updateDoc) => console.log("Doc Updated!! ", updateDoc))
  .catch((err) => console.log("Update Error: ", err));

一、更新代码的问题 #

你的更新代码存在两处核心错误：

1. 接口误用：spreadsheets/{docId}:batchUpdate 用于执行表格结构类操作（如修改格式、增删工作表），写入单元格数据应使用spreadsheets/{docId}/values:batchUpdate接口。
2. 请求体错误：原代码未将sheetBody转为JSON字符串，fetch的body必须是字符串格式，直接传对象会被识别为无效内容；同时，spreadsheets:batchUpdate的请求体结构要求是requests数组而非data字段，完全不符合接口规范。

修正后的更新代码 #

var docId = doc.spreadsheetId;
var sheetData = [
  {
    range: `${sheetName}!A1`, // 从A1开始写入，自动适配数据行列数
    values: tableInfo
  }
];
var sheetBody = {
  data: sheetData,
  valueInputOption: "RAW"
};
fetch(`https://sheets.googleapis.com/v4/spreadsheets/${docId}/values:batchUpdate`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${token}`
  },
  body: JSON.stringify(sheetBody) // 必须转为JSON字符串
})
.then(res => res.json())
.then(updateDoc => console.log("Doc Updated!! ", updateDoc))
.catch(err => console.log("Update Error: ", err));

二、能否直接创建带数据的表格？ #

可以，无需分两步操作。在创建表格的请求体中，给工作表添加data字段，通过rowData传入初始化数据，动态行列也能完美适配：

直接创建带数据的表格代码 #

// 将tableInfo转换为API要求的rowData格式
const rowData = tableInfo.map(row => ({
  values: row.map(cell => ({ userEnteredValue: { stringValue: cell } }))
}));

const initialData = {
  properties: {
    title: `${fileName}`
  },
  sheets: [{
    properties: {
      title: `${sheetName}`
    },
    data: [{
      rowData: rowData
    }]
  }]
};

fetch("https://sheets.googleapis.com/v4/spreadsheets", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${token}`
  },
  body: JSON.stringify(initialData)
})
.then(doc => doc.json())
.then(doc => {
  console.log("带数据的表格创建成功！", doc.spreadsheetId);
})
.catch(error => console.log("创建错误：", error));

如果数据包含数字、日期等类型，只需对应修改userEnteredValue的字段（如numberValue、dateValue）即可。

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