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

时间:2010-11-10 11:19:12

标签: javascript google-api google-sheets-api google-data-api google-api-js-client

我想仅使用JavaScript访问Google Spreadsheets(无.NET,C#,Java等)

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

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

13 个答案:

答案 0 :(得分:51)

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

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

你可以在这里看到它:

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

答案 1 :(得分:40)

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应用程序。
  2. 您还可以使用Google APIs Client Library for JavaScript访问客户端上的最新Google Sheets REST API
  3. 使用JavaScript访问Google API的第三种方法来自使用its client library的Node.js应用。它与使用上面描述的JavaScript(客户端)客户端库类似,只是您将从服务器端访问相同的API。这是Sheets的the Node.js Quickstart example。您可能会发现上面基于Python的视频更加有用,因为它们也从服务器端访问API。
  4. 使用REST API时,您需要管理&存储您的源代码以及通过滚动您自己的身份验证代码来执行授权(请参阅上面的示例)。 Apps脚本代表您处理此问题,管理数据(减少Ape-in​​ago在their answer中提到的“痛苦”),并且您的代码存储在Google的服务器上。但是您的功能仅限于App Script提供的服务以及较旧的JS(ES3 +一些ES5功能和Google自定义),而REST API为开发人员提供了更广泛的API访问。但是,嘿,有选择是对的,对吗?总而言之,为了回答OP原始问题而不是零,开发人员有三种方式使用JavaScript访问Google表格。

答案 2 :(得分:34)

这是要点。

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

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

通过list based feedscell 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专门工作。

答案 3 :(得分:10)

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

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

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

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

您也可以publish such scripts as web apps

答案 4 :(得分:6)

  

编辑: 这是在Google doc的api发布之前得到解答的。有关更新的信息,请参阅Evan Plaice's answerDan 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/

答案 5 :(得分: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);                                                                                                                                                       
  });                

答案 6 :(得分:4)

'访问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

可能这些会帮助你..

答案 7 :(得分:2)

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

以下是您可以"star"

的正式请求

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

答案 8 :(得分:2)

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

答案 9 :(得分:2)

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

现在您可以使用Google Drive Web APIs

答案 10 :(得分:1)

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

来完成
  1. example from git
  2. another Example

答案 11 :(得分:0)

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

答案 12 :(得分:0)

您可以使用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>