javascript - 如何仅使用 Javascript 访问 Google 表格电子表格？

Question

我想仅使用 JavaScript 访问 Google 电子表格（没有 .NET、C#、Java 等）

我来到这里，很震惊地知道没有用于 JavaScript 的 API 来访问 Google 表格。

请告诉我如何使用 JavaScript 或其任何框架（如 jQuery）访问（创建/编辑/删除）Google 表格。

score 65 · Accepted Answer

我创建了一个简单的 javascript 库，它通过 JSON api 检索 google 电子表格数据（如果它们已发布）：

https://github.com/mikeymckay/google-spreadsheet-javascript

你可以在这里看到它的实际效果：

http://mikeymckay.github.com/google-spreadsheet-javascript/sample.html

score 61 · Accepted Answer

2018 年 1 月更新：当我去年回答这个问题时，我忽略了使用 JavaScript 访问 Google API的第三种方法，那就是从 Node.js 应用程序使用其客户端库，所以我在下面添加了它。

现在是Mar 2017，这里的大多数答案都已经过时了——现在接受的答案是指使用旧 API 版本的库。一个更新的答案：您只能使用 JavaScript访问大多数 Google API 。谷歌今天提供了 2（更正，3）方法来做到这一点：

正如Dan Dascalescu 的回答中提到的，您可以使用Google Apps Script，即 JavaScript-in-Google's-cloud 解决方案。也就是说，在 Google 服务器上运行的浏览器之外的非 Node 服务器端 JS 应用程序。

您在Apps 脚本代码编辑器中编写应用程序代码，它们可以通过两种不同的方式访问 Google 表格：
- 电子表格服务（原生对象支持；使用指南）；本机更容易，但通常比...
- Google 表格高级服务（直接访问最新的Google 表格 REST API [见下文]；使用指南）
Apps 脚本还支持附加组件，您可以使用表格附加组件（如这些）扩展表格 UI 功能
您甚至可以编写移动插件来扩展Android 上的表格应用程序
要了解有关使用 Apps 脚本的更多信息，请查看我创建的这些视频（大部分涉及使用表格）

您还可以使用适用于 JavaScript 的 Google API 客户端库在客户端访问最新的Google 表格 REST API。

以下是使用客户端库的一些通用示例
最新的 Sheets API (v4)在 Google I/O 2016上发布；它比所有以前的版本都强大得多，让开发人员可以通过编程方式访问表格 UI 中的大多数功能
这是 API 的JavaScript 快速入门，可帮助您入门
以下是核心 API 请求的示例“配方” （JSON 有效负载）
如果您对 Python 没有“过敏”（如果您是，请假装它是伪代码；）），我制作了几个视频，其中包含更多使用 API 的“真实世界”示例，您可以从中学习并在需要时迁移到 JS（注意：即使它是 Python 代码，大多数 API 请求都有 JSON 并且很容易移植到 JS）：
1. 将 SQL 数据迁移到工作表（代码深入研究）
2. 使用 Sheets API 格式化文本（代码深入研究）
3. 从电子表格数据生成幻灯片（代码深入研究）
4. Sheets API 视频库中的那些和其他

第三种使用 JavaScript 访问 Google API 的方法是从服务器端的Node.js 客户端库。它的工作方式类似于使用上面描述的 JavaScript（客户端）客户端库，只是您将从服务器端访问相同的 API。这是Sheets的 Node.js 快速入门示例。您可能会发现上面基于 Python 的视频更加有用，因为它们也可以从服务器端访问 API。

使用 REST API 时，您需要管理和存储您的源代码以及通过滚动您自己的身份验证代码来执行授权（请参阅上面的示例）。Apps Script 代表您处理此问题，管理数据（减少 Ape-inago 在其回答中提到的“痛苦” ），并且您的代码存储在 Google 的服务器上。但是您的功能仅限于 App Script 提供的服务，而 REST API 为开发人员提供了更广泛的 API 访问权限。但是，嘿，有选择很好，对吧？总之，要回答 OP 原始问题，而不是零，开发人员可以通过三种方式使用 JavaScript 访问 Google 表格。

score 37 · Accepted Answer

这是要点。

您可以使用Google Sheets API创建电子表格。目前无法使用 API 删除电子表格（阅读文档）。将 Google Docs API 视为创建和查找文档的途径。

您可以使用基于工作表的提要在电子表格中添加/删除工作表。

通过基于列表的提要或基于单元格的提要来更新电子表格。

可以通过上面提到的 Google 电子表格 API 读取电子表格，或者，仅对于已发布的表格，通过使用Google 可视化 API 查询语言来查询数据（可以以 CSV、JSON 或 HTML 表格格式返回结果）。

忘记 jQuery。只有在遍历 DOM 时，jQuery 才真正有价值。由于 GAS（Google Apps 脚本）不使用 DOM，jQuery 不会为您的代码增加任何价值。坚持香草。

我真的很惊讶没有人在答案中提供这些信息。不仅可以做到，而且使用 vanilla JS 做起来也相对容易。唯一的例外是相对较新的 Google Visualization API（截至 2011 年）。可视化 API 还专门通过 HTTP 查询字符串 URI 工作。

score 17 · Accepted Answer

有一种解决方案不需要发布电子表格。但是，工作表确实需要“共享”。更具体地说，需要以任何拥有链接的人都可以访问电子表格的方式共享工作表。完成此操作后，就可以使用 Google Sheets HTTP API。

首先，您需要一个 Google API 密钥。前往此处： https ://developers.google.com/places/web-service/get-api-key NB。请注意向公众提供 API 密钥的安全后果：https: //support.google.com/googleapi/answer/6310037

获取电子表格的所有数据 - 警告，这可能是很多数据。

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}&includeGridData=true

获取工作表元数据

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}

获取一系列单元格

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{sheetName}!{cellRange}?key={yourAPIKey}

现在有了这些信息，就可以使用 AJAX 检索数据，然后在 JavaScript 中对其进行操作。我会推荐使用axios。

var url = "https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}&includeGridData=true";                                                             
axios.get(url)
  .then(function (response) {
    console.log(response);                                                                                                                                                    
  })
  .catch(function (error) {
    console.log(error);                                                                                                                                                       
  });

score 12 · Accepted Answer

2016 年更新：最简单的方法是使用 Google Apps Script API，尤其是SpreadSheet Service。这适用于私人工作表，与其他需要发布电子表格的答案不同。

这将允许您将 JavaScript 代码绑定到 Google 表格，并在打开表格或选择菜单项（您可以定义）时执行它。

这是一个快速入门/演示。代码如下所示：

// Let's say you have a sheet of First, Last, email and you want to return the email of the
// row the user has placed the cursor on.
function getActiveEmail() {
  var activeSheet = SpreadsheetApp.getActiveSheet();
  var activeRow = .getActiveCell().getRow();
  var email = activeSheet.getRange(activeRow, 3).getValue();

  return email;
}

您还可以将此类脚本发布为 Web 应用程序。

score 6 · Accepted Answer

编辑：这是在谷歌文档的 api 发布之前回答的。有关更多最新信息，请参阅Evan Plaice 的回答和Dan Dascalescu 的回答。

它看起来像你可以，但使用起来很痛苦。它涉及使用 Google 数据 API。

http://gdatatips.blogspot.com/2008/12/using-javascript-client-library-w-non.html

“JavaScript 客户端库具有日历、联系人、Blogger 和 Google 财经的辅助方法。但是，您几乎可以将它与任何 Google 数据 API 一起使用，以访问经过身份验证的/私人订阅源。本示例使用 DocList API。”

以及编写与电子表格交互的小工具的示例：http ://code.google.com/apis/spreadsheets/gadgets/

score 4 · Accepted Answer

'JavaScript 访问 Google Docs' 实现起来会很乏味，而且 Google 文档也不是那么容易获得。我有一些很好的链接可以分享，您可以通过这些链接实现对 gdoc 的 js 访问：

http://code.google.com/apis/documents/docs/3.0/developers_guide_protocol.html#UploadingDocs

http://code.google.com/apis/spreadsheets/gadgets/

http://code.google.com/apis/gdata/docs/js.html

http://www.mail-archive.com/google-help-dataapi@googlegroups.com/msg01924.html

可能这些会帮助你..

score 2 · Accepted Answer

对不起，这是一个糟糕的答案。显然，这已经是近两年的问题了，所以不要屏住呼吸。

这是您可以“加星”的官方要求

可能最接近您的方法是使用 Google App Engine/Python 推出您自己的服务，并使用您自己的 JS 库公开您需要的任何子集。虽然我很想自己有一个更好的解决方案。

score 2 · Accepted Answer

在这个瞬息万变的世界中，大多数这些链接都已过时。

现在您可以使用Google Drive Web API：

score 2 · Accepted Answer

2

您可以使用Sheetsee.js和tabletop.js 来完成

于 2016-11-11T09:48:21.013 回答

score 1 · Accepted Answer

您可以使用 RGraph 表格连接器在 JavaScript 中读取 Google Sheets 电子表格数据：

https://www.rgraph.net/canvas/docs/import-data-from-google-sheets.html

最初（几年前）这依赖于一些 RGraph 函数来发挥它的魔力 - 但现在它可以独立工作（即不需要 RGraph 通用库）。

一些示例代码（此示例制作 RGraph 图表）：

<!-- Include the sheets library -->
<script src="RGraph.common.sheets.js"></script>

<!-- Include these two RGraph libraries to make the chart -->
<script src="RGraph.common.key.js"></script>
<script src="RGraph.bar.js"></script>

<script>
    // Create a new RGraph Sheets object using the spreadsheet's key and
    // the callback function that creates the chart. The RGraph.Sheets object is
    // passed to the callback function as an argument so it doesn't need to be
    // assigned to a variable when it's created
    new RGraph.Sheets('1ncvARBgXaDjzuca9i7Jyep6JTv9kms-bbIzyAxbaT0E', function (sheet)
    {
        // Get the labels from the spreadsheet by retrieving part of the first row
        var labels = sheet.get('A2:A7');

        // Use the column headers (ie the names) as the key
        var key = sheet.get('B1:E1');

        // Get the data from the sheet as the data for the chart
        var data   = [
            sheet.get('B2:E2'), // January
            sheet.get('B3:E3'), // February
            sheet.get('B4:E4'), // March
            sheet.get('B5:E5'), // April
            sheet.get('B6:E6'), // May
            sheet.get('B7:E7')  // June
        ];

        // Create and configure the chart; using the information retrieved above
        // from the spreadsheet
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                xaxisLabels: labels,
                xaxisLabelsOffsety: 5,
                colors: ['#A8E6CF','#DCEDC1','#FFD3B6','#FFAAA5'],
                shadow: false,
                colorsStroke: 'rgba(0,0,0,0)',
                yaxis: false,
                marginLeft: 40,
                marginBottom: 35,
                marginRight: 40,
                key: key,
                keyBoxed: false,
                keyPosition: 'margin',
                keyTextSize: 12,
                textSize: 12,
                textAccessible: false,
                axesColor: '#aaa'
            }
        }).wave();
    });
</script>

score -1 · Accepted Answer

对于这种类型的事情，您应该使用Google Fusion Tables。API就是为此目的而设计的。

javascript - 如何仅使用 Javascript 访问 Google 表格电子表格？

12 回答 12

获取电子表格的所有数据 - 警告，这可能是很多数据。

获取工作表元数据

获取一系列单元格

Related

Reference