【问题标题】:How can I access Google Sheet spreadsheets only with Javascript?如何仅使用 Javascript 访问 Google 表格电子表格?
【发布时间】:2023-03-05 17:39:01
【问题描述】:

我想仅使用 JavaScript(不使用 .NET、C#、Java 等)访问 Google 电子表格

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

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

【问题讨论】:

  • 您提供的链接包含有关使用 JSON 的信息。你应该可以在 JavaScript 中使用它。
  • @GSto 如果你能提供一些关于这个的见解会很有帮助。让我再次给你打电话,我想通过 javascript 访问谷歌电子表格。谢谢。
  • 可能要考虑使用 Sheetsu。 JSON API 相当简单,并且受限于免费版本,但它确实简化了任何开发人员使用 Google 电子表格所需的内容。希望这对某些人有所帮助。

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


【解决方案1】:

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

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

您可以在这里看到它的实际效果:

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

【讨论】:

  • 这为我节省了大量时间。非常感谢!但是,我确实决定分叉您的代码,以便能够处理空数据单元格,并将其组织成行(按原样返回的数据只是一个巨大的单元格数组,但由于空单元格不是考虑到,没有简单的方法来组织数据)。更新只是针对您的“callbackCells()”方法。看看:github.com/rw3iss/google-spreadsheet-javascript.git 再次感谢伙计!
  • Evan Plaice 的回答 stackoverflow.com/a/8666573/42082 提供了有关官方 Google Docs API 以及如何使用电子表格的更多详细信息。值得一看。
  • 新版本 API 3.0 和 Oauth 2.0
  • 看起来 google 改变了政策,现在已经坏了。
【解决方案2】:

2018 年 1 月更新:当我去年回答这个问题时,我没有提到使用 JavaScript 访问 Google API 的第三种方式,那就是 Node.js。 js 应用程序使用 its 客户端库,所以我在下面添加了它。

现在是 2017 年 3 月,这里的大多数答案都已过时 - 现在接受的答案是指使用旧 API 版本的库。更新的答案:您只能使用 JavaScript 访问 most Google APIs。 Google 目前提供了 2(更正,3)种方法来做到这一点:

  1. answer by Dan Dascalescu 中所述,您可以使用 Google Apps Script,这是一种 JavaScript-in-Google 的云解决方案。也就是说,在 Google 服务器上运行的浏览器之外的非 Node 服务器端 JS 应用程序。
  1. 您也可以使用Google APIs Client Library for JavaScript在客户端访问最新的Google Sheets REST API
  1. 第三种使用 JavaScript 访问 Google API 的方法是从服务器端的 Node.js client library。它的工作方式类似于使用上面描述的 JavaScript(客户端)客户端库,只是您将从服务器端访问相同的 API。这是表格的the Node.js Quickstart example。您可能会发现上面基于 Python 的视频更加有用,因为它们也可以从服务器端访问 API。

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

【讨论】:

    【解决方案3】:

    这里是要点。

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

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

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

    可以通过上述 Google 电子表格 API 读取电子表格,仅适用于已发布的表格,通过使用 Google Visualization API Query Language 查询数据(可以以 CSV、JSON 格式返回结果) , 或 HTML 表格格式)。


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

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

    【讨论】:

      【解决方案4】:

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

      首先,您需要一个 Google API 密钥。头到这里: https://developers.google.com/places/web-service/get-api-key 注意。请注意公开 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);                                                                                                                                                       
        });                
      

      【讨论】:

      • 什么是网格数据?
      • @WilliamEntriken 单元格的内容。
      【解决方案5】:

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

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

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

      // 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;
      }
      

      你也可以publish such scripts as web apps

      【讨论】:

        【解决方案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 数据 API 一起使用,以访问经过身份验证的/私人订阅源。本示例使用 DocList API。”

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

        【讨论】:

        • 你为什么称它为“痛苦”。这样做有什么害处?
        • 很痛苦,因为它没有原生的api,这意味着你需要自己做很多解析和数据操作。原生电子表格 API 会为您提供这些。
        【解决方案7】:

        “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

        也许这些对你有帮助..

        【讨论】:

        【解决方案8】:

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

        这里是官方要求,可以"star"

        您可能最接近的是rolling your own service with Google App Engine/Python,并使用您自己的 JS 库公开您需要的任何子集。虽然我很想自己有一个更好的解决方案。

        【讨论】:

          【解决方案9】:

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

          现在你可以使用Google Drive Web APIs:

          【讨论】:

          【解决方案10】:

          你可以通过使用Sheetsee.js 和 tabletop.js 来做到这一点

          1. example from git
          2. another Example

          【讨论】:

            【解决方案11】:

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

            【讨论】:

            • 现在有一个 PHP 版本的导入实用程序 - 可在同一 URL 获得
            【解决方案12】:

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

            【讨论】:

            • 不是一个好主意。谷歌将关闭它。否决它。
            猜你喜欢
            • 2012-06-02
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-02-24
            • 2010-10-18
            相关资源
            最近更新 更多