如何通过客户端JavaScript读取Google Sheet单元格？

方案一：直接调用Google Sheets公开数据接口（适合非敏感数据） #

这种方式无需后端，直接通过客户端JS请求Google提供的公开接口，但要求你的Sheet设置了公开可查看权限。

1. 设置Sheet权限

   • 打开关联的Google Sheet，点击右上角「共享」
   • 选择「知道链接的任何人」，权限设为「查看者」，保存设置

2. 获取Sheet的API请求链接
   链接格式如下，替换其中的{SPREADSHEET_ID}和{SHEET_NAME}：

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

   • SPREADSHEET_ID：Sheet URL中/d/和/edit之间的字符串，比如https://docs.google.com/spreadsheets/d/abc123xyz/edit中的abc123xyz
   • SHEET_NAME：你要读取的工作表名称，比如默认的Sheet1

3. 客户端JS实现代码
   用fetch请求接口并解析数据：

   // 替换为你的表格ID和工作表名称
   const sheetId = "你的表格ID";
   const sheetName = "Sheet1";
   const apiUrl = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?tqx=out:json&sheet=${sheetName}`;
   
   fetch(apiUrl)
     .then(res => res.text())
     .then(rawData => {
       // 提取接口返回的JSON部分（接口返回的是带包裹的字符串）
       const jsonData = rawData.replace("google.visualization.Query.setResponse(", "").slice(0, -2);
       const parsedData = JSON.parse(jsonData);
       
       // 提取表格行数据，row.c是该行的单元格数组，cell.v为单元格值
       const rows = parsedData.table.rows;
       rows.forEach(row => {
         const cellValues = row.c.map(cell => cell ? cell.v : "");
         console.log("行内容：", cellValues);
         // 这里可以将数据渲染到你的HTML页面，比如生成列表或表格
       });
     })
     .catch(err => console.error("读取数据失败：", err));
   

方案二：用Google Apps Script做中间层（适合敏感数据） #

如果你的Sheet包含敏感信息（比如用户邮箱），不适合设置公开权限，就用Apps Script搭建一个安全的接口：

1. 编写Apps Script代码
   打开关联的Google Sheet，点击「扩展程序」→「Apps Script」，粘贴以下代码：

   function doGet() {
     // 替换为你的表格ID和工作表名称
     const sheet = SpreadsheetApp.openById("你的表格ID").getSheetByName("Sheet1");
     const allData = sheet.getDataRange().getValues();
     // 返回JSON格式数据
     return ContentService.createTextOutput(JSON.stringify(allData))
       .setMimeType(ContentService.MimeType.JSON);
   }
   

2. 部署为Web App

   • 点击Apps Script右上角「部署」→「新建部署」
   • 类型选择「Web应用」
   • 执行权限选「我」，谁可以访问选「任何人，甚至匿名」（根据你的需求调整）
   • 点击「部署」，复制生成的Web App URL

3. 客户端JS调用接口
   直接fetch这个Web App URL即可：

   const webAppUrl = "你的Web App部署URL";
   
   fetch(webAppUrl)
     .then(res => res.json())
     .then(data => {
       console.log("表格数据：", data);
       // 处理搜索、渲染逻辑
     })
     .catch(err => console.error("请求失败：", err));
   

结合你的搜索需求 #

拿到Sheet数据后，可以将数据存储在数组中，监听搜索栏的输入事件，实时过滤数据：

// 假设已获取到sheetData数组（包含所有行数据）
const searchInput = document.getElementById("tag-search");

searchInput.addEventListener("input", (e) => {
  const keyword = e.target.value.toLowerCase();
  const filteredData = sheetData.filter(row => {
    // 假设标签在第3列（索引为2），邮箱在第2列，时间在第1列
    const tag = row[2]?.toLowerCase() || "";
    const email = row[1]?.toLowerCase() || "";
    const time = row[0]?.toLowerCase() || "";
    return tag.includes(keyword) || email.includes(keyword) || time.includes(keyword);
  });
  // 重新渲染过滤后的内容
  renderFilteredData(filteredData);
});

function renderFilteredData(data) {
  const container = document.getElementById("content-container");
  container.innerHTML = "";
  data.forEach(row => {
    const item = document.createElement("div");
    item.innerHTML = `<p>时间：${row[0]} | 邮箱：${row[1]} | 标签：${row[2]} | 文件链接：<a href="${row[3]}" target="_blank">打开文件</a></p>`;
    container.appendChild(item);
  });
}

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