[英]How can I access Google Sheet spreadsheets only with Javascript?
I want to access Google Spreadsheets using JavaScript only (no .NET, C#, Java, etc.)我只想使用 JavaScript 访问 Google 电子表格(没有 .NET、C#、Java 等)
I came here and was shocked to know that there is NO API for JavaScript to access Google Sheets.我来到这里并惊讶地发现没有用于 JavaScript 的 API 来访问 Google 表格。
Please tell me how to access (CREATE/EDIT/DELETE) Google Sheets using JavaScript or any of its frameworks like jQuery.请告诉我如何使用 JavaScript 或其任何框架(如 jQuery)访问(创建/编辑/删除)Google 表格。
I have created a simple javascript library that retrieves google spreadsheet data (if they are published) via the JSON api:我创建了一个简单的 javascript 库,它通过 JSON api 检索谷歌电子表格数据(如果它们已发布):
https://github.com/mikeymckay/google-spreadsheet-javascript https://github.com/mikeymckay/google-spreadsheet-javascript
You can see it in action here:你可以在这里看到它的实际效果:
http://mikeymckay.github.com/google-spreadsheet-javascript/sample.html http://mikeymckay.github.com/google-spreadsheet-javascript/sample.html
Jan 2018 UPDATE : When I answered this question last year, I neglected to mention a third way to access Google APIs with JavaScript, and that would be from Node.js apps using its client library, so I added it below. 2018 年 1 月更新:去年回答这个问题时,我忽略了使用 JavaScript 访问 Google API 的第三种方法,那就是使用其客户端库的 Node.js 应用程序,所以我在下面添加了它。
It's Mar 2017 , and most of the answers here are outdated -- the accepted answer now refers to a library that uses an older API version.现在是2017 年 3 月,这里的大多数答案都已过时——现在接受的答案是指使用旧 API 版本的库。 A more current answer: you can access most Google APIs with JavaScript only.一个更新的答案:您只能使用 JavaScript 访问大多数 Google API 。 Google provides 2 (correction, 3) ways to do this today: Google 今天提供了 2 种(更正,3 种)方法来做到这一点:
When using the REST API, you need to manage & store your source code as well as perform authorization by rolling your own auth code (see samples above).使用 REST API 时,您需要管理和存储源代码并通过滚动您自己的身份验证代码来执行授权(请参阅上面的示例)。 Apps Script handles this on your behalf, managing the data (reducing the "pain" as mentioned by Ape-inago in their answer ), and your code is stored on Google's servers. Apps Script 代表您处理这个问题,管理数据(减少 Ape-inago 在他们的回答中提到的“痛苦”),并且您的代码存储在 Google 的服务器上。 But your functionality is restricted to what services App Script provides whereas the REST API gives developers much broader access to the API.但是您的功能仅限于 App Script 提供的服务,而 REST API 为开发人员提供了更广泛的 API 访问权限。 But hey, it's good to have choices, right?但是,嘿,有选择是件好事,对吧? In summary, to answer the OP original question, instead of zero, developers have three ways of accessing Google Sheets using JavaScript.总之,要回答 OP 原始问题,而不是零,开发人员可以通过三种方式使用 JavaScript 访问 Google 表格。
Here's the Gist.这是要点。
You can create a spreadsheet using the Google Sheets API .您可以使用Google Sheets API创建电子表格。 There is currently no way to delete a spreadsheet using the API (read the documentation).目前无法使用 API 删除电子表格(阅读文档)。 Think of Google Docs API as the route to create and look-up documents.将 Google Docs API 视为创建和查找文档的途径。
You can add/remove worksheets within the spreadsheet using the worksheet based feeds .您可以使用基于工作表的提要在电子表格中添加/删除工作表。
Updating a spreadsheet is done through either list based feeds or cell based feeds .通过基于列表的提要或基于单元格的提要来更新电子表格。
Reading the spreadsheet can be done through either the Google Spreadsheets APIs mentioned above or, for published sheets only , by using the Google Visualization API Query Language to query the data (which can return results in CSV, JSON, or HTML table format).可以通过上面提到的 Google 电子表格 API 读取电子表格,也可以通过使用Google Visualization API 查询语言查询数据(可以返回 CSV、JSON 或 HTML 表格格式的结果)来完成,仅对于已发布的表格。
Forget jQuery.忘记 jQuery。 jQuery is only really valuable if you're traversing the DOM. jQuery 只有在遍历 DOM 时才真正有价值。 Since GAS (Google Apps Scripting) doesn't use the DOM jQuery will add no value to your code.由于 GAS(Google Apps Scripting)不使用 DOM,jQuery 不会为您的代码增加任何价值。 Stick to vanilla.坚持香草。
I'm really surprised that nobody has provided this information in an answer yet.我真的很惊讶还没有人在答案中提供这些信息。 Not only can it be done, but it's relatively easy to do using vanilla JS.它不仅可以完成,而且使用 vanilla JS 相对容易。 The only exception being the Google Visualization API which is relatively new (as of 2011).唯一的例外是 Google Visualization API,它相对较新(截至 2011 年)。 The Visualization API also works exclusively through a HTTP query string URI.可视化 API 还专门通过 HTTP 查询字符串 URI 工作。
There's a solution that does not require one to publish the spreadsheet.有一种不需要发布电子表格的解决方案。 However, the sheet does need to be 'Shared'.但是,该工作表确实需要“共享”。 More specifically, one needs to share the sheet in a manner where anyone with the link can access the spreadsheet.更具体地说,需要以任何拥有链接的人都可以访问电子表格的方式共享工作表。 Once this is done, one can use the Google Sheets HTTP API.完成此操作后,就可以使用 Google Sheets HTTP API。
First up, you need an Google API key.首先,您需要一个 Google API 密钥。 Head here: https://developers.google.com/places/web-service/get-api-key NB.前往此处: https : //developers.google.com/places/web-service/get-api-key NB。 Please be aware of the security ramifications of having an API key made available to the public: https://support.google.com/googleapi/answer/6310037请注意公开 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}
Now armed with this information, one can use AJAX to retrieve data and then manipulate it in JavaScript.现在有了这些信息,就可以使用 AJAX 来检索数据,然后在 JavaScript 中对其进行操作。 I would recommend using axios .我建议使用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);
});
2016 update : The easiest way is to use the Google Apps Script API, in particular the SpreadSheet Service . 2016 更新:最简单的方法是使用 Google Apps Script API,尤其是SpreadSheet Service 。 This works for private sheets, unlike the other answers that require the spreadsheet to be published.这适用于私人工作表,不像其他需要发布电子表格的答案。
This will let you bind JavaScript code to a Google Sheet, and execute it when the sheet is opened, or when a menu item (that you can define) is selected.这将允许您将 JavaScript 代码绑定到 Google 表格,并在打开表格或选择菜单项(您可以定义)时执行它。
Here's a Quickstart/Demo .这是一个快速入门/演示。 The code looks like this:代码如下所示:
// 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;
}
You can also publish such scripts as web apps .您还可以发布诸如 Web 应用程序之类的脚本。
edit: This was answered before the google doc's api was released.编辑:这是在 google doc 的 api 发布之前回答的。 See Evan Plaice's answer and Dan Dascalescu's answer for more up-to-date information.有关更多最新信息,请参阅Evan Plaice 的回答和Dan Dascalescu 的回答。
It looks lke you can, but it's a pain to use.看起来你可以,但使用起来很痛苦。 It involves using the Google data API.它涉及使用 Google 数据 API。
http://gdatatips.blogspot.com/2008/12/using-javascript-client-library-w-non.html http://gdatatips.blogspot.com/2008/12/using-javascript-client-library-w-non.html
"The JavaScript client library has helper methods for Calendar, Contacts, Blogger, and Google Finance. However, you can use it with just about any Google Data API to access authenticated/private feeds. This example uses the DocList API." “JavaScript 客户端库具有用于日历、通讯录、Blogger 和 Google 财经的辅助方法。但是,您几乎可以将它与任何 Google 数据 API 一起使用来访问经过身份验证的/私有提要。本示例使用 DocList API。”
and an example of writing a gadget that interfaces with spreadsheets: http://code.google.com/apis/spreadsheets/gadgets/以及编写与电子表格交互的小工具的示例: http : //code.google.com/apis/spreadsheets/gadgets/
'JavaScript accessing Google Docs' would be tedious to implement and moreover Google documentation is also not that simple to get it. 'JavaScript 访问 Google Docs' 实施起来会很乏味,而且 Google 文档也不是那么容易获得。 I have some good links to share by which you can achieve js access to gdoc:我有一些很好的链接可以分享,您可以通过它们实现对 gdoc 的 js 访问:
http://code.google.com/apis/documents/docs/3.0/developers_guide_protocol.html#UploadingDocs 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/spreadsheets/gadgets/
http://code.google.com/apis/gdata/docs/js.html http://code.google.com/apis/gdata/docs/js.html
http://www.mail-archive.com/google-help-dataapi@googlegroups.com/msg01924.html http://www.mail-archive.com/google-help-dataapi@googlegroups.com/msg01924.html
May be these would help you out..也许这些会帮助你..
you can do it by using Sheetsee.js and tabletop.js你可以使用Sheetsee.js和tabletop.js
Sorry, this is a lousy answer.对不起,这是一个糟糕的答案。 Apparently this has been an issue for almost two years so don't hold your breath.显然,这已经是近两年的问题了,所以不要屏住呼吸。
Here is the official request that you can "star"这是您可以“明星”的官方要求
Probably the closest you can come isrolling your own service with Google App Engine/Python and exposing whatever subset you need with your own JS library.可能最接近的是使用 Google App Engine/Python 推出您自己的服务,并使用您自己的 JS 库公开您需要的任何子集。 Though I'd love to have a better solution myself.虽然我很想自己有一个更好的解决方案。
You can read Google Sheets spreadsheets data in JavaScript by using the RGraph sheets connector:您可以使用 RGraph 表格连接器在 JavaScript 中读取 Google 表格电子表格数据:
https://www.rgraph.net/canvas/docs/import-data-from-google-sheets.html https://www.rgraph.net/canvas/docs/import-data-from-google-sheets.html
Initially (a few years ago) this relied on some RGraph functions to work its magic - but now it can work standalone (ie not requiring the RGraph common library).最初(几年前)这依赖于一些 RGraph 函数来发挥它的魔力——但现在它可以独立工作(即不需要 RGraph 公共库)。
Some example code (this example makes an RGraph chart):一些示例代码(这个例子制作了一个 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>
I'm building out Stein to help you do just that. 我正在建立斯坦因来帮助你做到这一点。 It also provides an HTML only solution, should you wish to display data straight from the sheet. 如果您希望直接从工作表中显示数据,它还提供仅HTML解决方案。 Check it out at steinhq.com . 在steinhq.com上查看。
For this type of thing you should use Google Fusion Tables .对于这种类型的事情,您应该使用Google Fusion Tables 。 The API is designed for that purpose. API就是为此目的而设计的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.