通过浏览器中运行的 JavaScript 将数据推送到 Google 电子表格

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19887737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 17:09:47  来源:igfitidea点击:

Pushing data to Google spreadsheet through JavaScript running in browser

javascriptjsonpgoogle-sheetscorsgoogle-spreadsheet-api

提问by Martin Dimitrov

I am working on an web application where I would like to allow the user to push data to her own Google spreadsheet.

我正在开发一个网络应用程序,我希望允许用户将数据推送到她自己的 Google 电子表格。

Firstly I tried to use Google APIs Client Library for JavaScriptbut it doesn't seem to cover the Spreadsheet API (https://developers.google.com/apis-explorer/#p/).

首先,我尝试将Google API 客户端库用于 JavaScript,但它似乎没有涵盖电子表格 API ( https://developers.google.com/apis-explorer/#p/)。

Then I decided to use directly the Google Spreadsheets API version 3.0. I manage to retrieve the user's spreadsheets using jQueryand JSONP:

然后我决定直接使用Google Spreadsheets API version 3.0。我设法使用jQuery和检索用户的电子表格JSONP

$.ajax({
  url: 'https://spreadsheets.google.com/feeds/spreadsheets/private/full?alt=json-in-script&access_token=' + access_token,
  dataType: 'JSONP',
  success: function(data){
    // use the spreadsheets
  }
});

In the same method I retrieve the sheets from the user selected spreadsheet. Then I have to POSTthe data to the selected sheet. And here comes the problem: can't do it using JSONP. And the Google server seems not to support CORS. I get the following error in the browser:

我用同样的方法从用户选择的电子表格中检索工作表。然后我必须POST将数据添加到选定的工作表中。问题来了:不能使用JSONP. 而且 Google 服务器似乎不支持CORS. 我在浏览器中收到以下错误:

XMLHttpRequest cannot load https://spreadsheets.google.com/feeds/... Origin ..mysite.. is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load https://spreadsheets.google.com/feeds/... Origin ..mysite.. is not allowed by Access-Control-Allow-Origin.

Thanks for looking into this.

感谢您查看这个。

回答by nelsonic

Step-by-stepinstructions with screenshots

带屏幕截图的分步说明

After reading Martin Hawskey's goodintroduction (to sending data from an HTML form to a Google Spreadsheet) and seeing a few gaps/assumptions, we decided to write a detailed/comprehensive tutorial with step-by-step instructionswhich a fewpeople have found useful:

在阅读了Martin Hawskey精彩介绍(将数据从 HTML 表单发送到 Google 电子表格)并看到一些差距/假设后,我们决定编写一个详细/全面的教程,其中包含一些人拥有的分步说明发现有用:

https://github.com/dwyl/html-form-send-email-via-google-script-without-server

https://github.com/dwyl/ html-form- send-email-via- google-script-without-server

The script saves any data sent via HTTP POSTin the Google Spreadsheet, and optionallyforwards the content to an email address. (useful if you want to be notified of new data)

该脚本将通过HTTP POSTGoogle 电子表格发送的任何数据保存,并可选择将内容转发到电子邮件地址。(如果您想收到新数据的通知,则很有用

HTML Form:

HTML 表单:

contact form

联系表

Result (row in sheet):

结果(工作表中的行):

row in sheet

工作表中的行

Hope it helps others.

希望它可以帮助其他人。

回答by dev

I was looking into this too about 8 months. I stumbled across a blog post written by Martin Hawskey. I followed the guide here and I was able to set up a HTML form posting to a spreadsheet.

我也在调查这个大约 8 个月。我偶然发现了 Martin Hawskey 写的一篇博文。我按照这里的指南,我能够设置一个 HTML 表单发布到电子表格。

Effectively you set up a published web app inside the spreadsheet that can receive the data. To get around the CORS issues you target a hidden iframe on the page. I would replicate the code in this post but there is a fair bit of it.

您可以有效地在电子表格中设置一个可以接收数据的已发布 Web 应用程序。要解决 CORS 问题,您可以定位页面上隐藏的 iframe。我会复制这篇文章中的代码,但有相当多的内容。

DEMO

演示

I'll provide some advice that I wish I was given when I started looking at this. If you can... try and set up a PHP server you can use. Posting the data is a lot easier and flexible. I now use Zend GDatareligiously at work and wish I had found it sooner :)

我将提供一些我希望在我开始研究时得到的建议。如果可以的话...尝试设置一个可以使用的 PHP 服务器。发布数据更加容易和灵活。我现在在工作中虔诚地使用Zend GData并希望我早点找到它:)

EDIT

编辑

Marting Hawskey has updated this to support a AJAX submission without the use of a hidden iframe. See here.

Martining Hawskey 对此进行了更新,以支持 AJAX 提交而不使用隐藏的 iframe。见这里