如何僅使用 Javascript 訪問 Google Sheet 電子表格？

Question

我只想使用 JavaScript 訪問 Google 電子表格（沒有 .NET、C#、Java 等）

我來到這里並驚訝地發現沒有用於 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 應用程序，所以我在下面添加了它。

現在是2017 年 3 月，這里的大多數答案都已過時——現在接受的答案是指使用舊 API 版本的庫。 一個更新的答案：您只能使用 JavaScript 訪問大多數 Google API 。 Google 今天提供了 2 種（更正，3 種）方法來做到這一點：

1. 正如Dan Dascalescu的回答中提到的，您可以使用Google Apps Script ，即 JavaScript-in-Google's-cloud 解決方案。 也就是說，在 Google 服務器上運行的瀏覽器之外的非 Node 服務器端 JS 應用程序。

• 您在Apps 腳本代碼編輯器中編寫應用程序，它們可以通過兩種不同的方式訪問 Google 表格：
  • 電子表格服務（本機對象支持；使用指南）； 本機更容易，但通常比......
  • Google Sheets Advanced Service （直接訪問最新的 Google Sheets REST API [見下文]； 使用指南）
• Apps Script 還支持附加組件，您可以使用 Sheets 附加組件擴展 Sheets UI 功能（例如這些）
• 您甚至可以編寫移動插件來擴展Android 上的表格應用
• 要了解有關使用 Apps 腳本的更多信息，請查看我創建的這些視頻（大多數涉及使用表格）

2. 您還可以使用適用於 JavaScript的Google API 客戶端庫在客戶端訪問最新的Google Sheets REST API 。

• 以下是使用客戶端庫的一些通用示例
• 最新的床單API（V4）被發布在谷歌I / O 2016年它比所有以前的版本都強大得多，使開發人員能夠以編程方式訪問 Sheets UI 中的大多數功能
• 這是 API 的JavaScript 快速入門，可幫助您入門
• 以下是核心 API 請求的示例“食譜” （JSON 有效負載）
• 如果您對 Python 不“過敏”（如果是，請假裝它是偽代碼；）），我制作了幾個視頻，其中包含更多使用 API 的“真實世界”示例，您可以從中學習並在需要時遷移到 JS（注意：即使它是 Python 代碼，大多數 API 請求都有 JSON 並且很容易移植到 JS）：
  1. 將 SQL 數據遷移到工作表（代碼深入探討帖子）
  2. 使用 Sheets API 格式化文本（代碼深度挖掘帖子）
  3. 從電子表格數據生成幻燈片（代碼深度挖掘帖子）
  4. Sheets API 視頻庫中的那些和其他

3. 使用 JavaScript 訪問 Google API 的第三種方式來自服務器端的Node.js 客戶端庫。 它的工作方式類似於使用上面描述的 JavaScript（客戶端）客戶端庫，只是您將從服務器端訪問相同的 API。 這是表格的 Node.js 快速入門示例。 您可能會發現上面基於 Python 的視頻更有用，因為它們也從服務器端訪問 API。

使用 REST API 時，您需要管理和存儲源代碼並通過滾動您自己的身份驗證代碼來執行授權（請參閱上面的示例）。 Apps Script 代表您處理這個問題，管理數據（減少 Ape-in​​ago 在他們的回答中提到的“痛苦”），並且您的代碼存儲在 Google 的服務器上。 但是您的功能僅限於 App Script 提供的服務，而 REST API 為開發人員提供了更廣泛的 API 訪問權限。 但是，嘿，有選擇是件好事，對吧？ 總之，要回答 OP 原始問題，而不是零，開發人員可以通過三種方式使用 JavaScript 訪問 Google 表格。

Answer 3

這是要點。

您可以使用Google Sheets API創建電子表格。 目前無法使用 API 刪除電子表格（閱讀文檔）。 將 Google Docs API 視為創建和查找文檔的途徑。

您可以使用基於工作表的提要在電子表格中添加/刪除工作表。

通過基於列表的提要或基於單元格的提要來更新電子表格。

可以通過上面提到的 Google 電子表格 API 讀取電子表格，也可以通過使用Google Visualization API 查詢語言查詢數據（可以返回 CSV、JSON 或 HTML 表格格式的結果）來完成，僅對於已發布的表格。

---

忘記 jQuery。 jQuery 只有在遍歷 DOM 時才真正有價值。 由於 GAS（Google Apps Scripting）不使用 DOM，jQuery 不會為您的代碼增加任何價值。 堅持香草。

我真的很驚訝還沒有人在答案中提供這些信息。 它不僅可以完成，而且使用 vanilla JS 相對容易。 唯一的例外是 Google Visualization API，它相對較新（截至 2011 年）。 可視化 API 還專門通過 HTTP 查詢字符串 URI 工作。

Answer 4

有一種不需要發布電子表格的解決方案。 但是，該工作表確實需要“共享”。 更具體地說，需要以任何擁有鏈接的人都可以訪問電子表格的方式共享工作表。 完成此操作后，就可以使用 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);                                                                                                                                                       
  });                

Answer 5

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 應用程序之類的腳本。

Answer 6

編輯：這是在 google doc 的 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/

Answer 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

也許這些會幫助你..

Answer 8

在這個瞬息萬變的世界中，大多數這些鏈接都已過時。

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

• 爪哇
• PHP
• Java腳本
• 。網
• Python
• 紅寶石
• 和別的...

Answer 9

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

1. 來自 git 的例子
2. 另一個例子

Answer 10

對不起，這是一個糟糕的答案。 顯然，這已經是近兩年的問題了，所以不要屏住呼吸。

這是您可以“明星”的官方要求

可能最接近的是使用 Google App Engine/Python 推出您自己的服務，並使用您自己的 JS 庫公開您需要的任何子集。 雖然我很想自己有一個更好的解決方案。

Answer 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>

Answer 12

我正在建立斯坦因來幫助你做到這一點。 如果您希望直接從工作表中顯示數據，它還提供僅HTML解決方案。 在steinhq.com上查看。

Answer 13

對於這種類型的事情，您應該使用Google Fusion Tables 。 API就是為此目的而設計的。