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

Question

我想仅使用JavaScript访问Google Spreadsheets（无.NET，C＃，Java等）

我来here并且震惊地知道JavaScript没有API可以访问Google表格。

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

Answer 1

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

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

你可以在这里看到它：

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

Answer 2

2018年1月更新：当我去年回答这个问题时，我忽略了提及使用JavaScript访问Google API的第三种方式，这将来自Node。 js apps使用其客户端库，所以我在下面添加了它。

2017年3月 ，此处的大多数答案都已过时 - 现在接受的答案是指使用较旧API版本的库。更新的答案：您只能使用JavaScript访问most Google APIs。 Google今天提供了3种方法：

1. 正如answer by Dan Dascalescu中所述，您可以使用JavaScript中的云端解决方案Google Apps Script。也就是说，在Google服务器上运行的浏览器之外的非节点服务器端JS应用程序。
   • 您可以在Apps Script code editor中对应用进行编码，他们可以通过两种不同的方式访问Google表格：
     1. Spreadsheet Service（原生对象支持; usage guide）;本地人比较容易，但通常比...更早。
     2. Google Sheets Advanced Service（直接访问最新的Google表格REST API [见下文]; usage guide）
   • Apps脚本还支持add-ons，您可以使用表格附加组件（例如these）
   扩展表格UI功能
   • 你甚至可以写mobile add-ons来扩展Sheets app on Android
   • 要了解有关使用Apps脚本的更多信息，请查看我创建的these videos（大部分内容涉及使用表格）
2. 您还可以使用Google APIs Client Library for JavaScript访问客户端上的最新Google Sheets REST API。
   • 以下是使用客户端库的some generic samples
   • Google I / O 2016上的最新表格API（v4）为released;它比以前的所有版本都强大得多，它使开发人员能够以编程方式访问Sheets UI中的大多数功能
   • 以下是帮助您入门的API的JavaScript quickstart
   • 以下是核心API请求的sample "recipes"（JSON有效负载）
   • 如果你对Python没有“过敏”（如果你是，只是假装它是伪代码;）），我制作了几个视频，其中包含更多“真实世界”的样本，使用你可以学习的API并迁移到JS如果需要（注意：即使它是Python代码，大多数API请求都有JSON和轻松移植到JS）：
     1. Migrating SQL data to a Sheet（代码深潜post）
     2. Formatting text using the Sheets API（代码深潜post）
     3. Generating slides from spreadsheet data（代码深潜post）
3. 使用JavaScript访问Google API的第三种方法来自使用its client library的Node.js应用。它与使用上面描述的JavaScript（客户端）客户端库类似，只是您将从服务器端访问相同的API。这是Sheets的the Node.js Quickstart example。您可能会发现上面基于Python的视频更加有用，因为它们也从服务器端访问API。

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

Answer 3

这是要点。

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

您可以使用worksheet based feeds在电子表格中添加/删除工作表。

通过list based feeds或cell based feeds更新电子表格。

阅读电子表格可以通过上面提到的Google Spreadsheets API或仅针对已发布的工作表，使用Google Visualization API Query Language查询数据（可以返回CSV格式的结果）来完成，JSON或HTML表格式。）

---

忘记jQuery。如果你遍历DOM，jQuery才真正有价值。由于GAS（Google Apps Scripting）不使用DOM，因此jQuery将不会为您的代码添加任何价值。坚持香草。

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

Answer 4

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

这样您就可以将JavaScript代码绑定到Google表格，并在打开工作表时或者选择了一个菜单项（您可以定义）时执行它。

这是一个Quickstart/Demo。代码如下所示：

android:background="@android:color/transparent"

您也可以publish such scripts as web apps。

Answer 5

  

编辑： 这是在Google doc的api发布之前得到解答的。有关更新的信息，请参阅Evan Plaice's answer和Dan Dascalescu's answer   信息。

看起来你可以，但这是一个痛苦的使用。它涉及使用Google数据API。

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

“JavaScript客户端库包含日历，通讯录，Blogger和Google财经的辅助方法。但是，您可以将它与几乎任何Google Data API一起使用来访问经过身份验证的/私有的Feed。此示例使用DocList API。”

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

Answer 6

有一种解决方案不需要发布电子表格。但是，工作表确实需要“共享”。更具体地说，需要以具有链接的任何人可以访问电子表格的方式共享工作表。完成后，可以使用Google表格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);                                                                                                                                                       
  });                

Answer 7

'访问Google文档的JavaScript'实施起来会很繁琐，而且谷歌文档也不是那么简单。我有一些很好的链接可以通过它分享jd访问gdoc：

  

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

可能这些会帮助你..

Answer 8

抱歉，这是一个糟糕的答案。显然这已经是issue差不多两年了所以不要屏住呼吸。

以下是您可以"star"

的正式请求

你最接近的可能是rolling your own service with Google App Engine/Python并且用你自己的JS库暴露你需要的任何子集。虽然我希望自己能有更好的解决方案。

Answer 9

对于此类事情，您应该使用Google Fusion Tables。 API专为此目的而设计。

Answer 10

在这个瞬息万变的世界中，大部分链接都是过时的。

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

• Java
• PHP
• Javacript
• .NET
• Python
• Ruby
• 和其他人......

Answer 11

您可以使用Sheetsee.js和tabletop.js

来完成

1. example from git
2. another Example

Answer 12

我正在建立斯坦因来帮助您做到这一点。如果您希望直接从工作表中显示数据，它还提供了仅HTML的解决方案。在steinhq.com处进行检查。

Answer 13

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

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>