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

Pushing data to Google spreadsheet through JavaScript running in browser(通过在浏览器中运行的 JavaScript 将数据推送到 Google 电子表格)
本文介绍了通过在浏览器中运行的 JavaScript 将数据推送到 Google 电子表格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

首先我尝试使用 Google APIs Client Library for JavaScript,但似乎没有涵盖电子表格 API (https://developers.google.com/apis-explorer/#p/).

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

然后我决定直接使用 Google 电子表格 API 3.0 版.我设法使用 jQueryJSONP 检索用户的电子表格:

Then I decided to use directly the Google Spreadsheets API version 3.0. I manage to retrieve the user's spreadsheets using jQuery and 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
  }
});

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

In the same method I retrieve the sheets from the user selected spreadsheet. Then I have to POST the 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:

XMLHttpRequest 无法加载 https://spreadsheets.google.com/feeds/... Origin ..mysite.. 是 Access-Control-Allow-Origin 不允许的.

感谢您对此进行调查.

推荐答案

我也研究了大约 8 个月.我偶然发现 Martin Hawskey 撰写的博文.我按照此处的指南进行操作,并且能够将 HTML 表单发布到电子表格.

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.

实际上,您在电子表格中设置了一个可以接收数据的已发布网络应用程序.要解决 CORS 问题,您可以在页面上定位隐藏的 iframe.我会复制这篇文章中的代码,但其中有很多.

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.

演示

  • 这是 HTML 表单.
  • 这是接收数据的电子表格.

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

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 GData religiously at work and wish I had found it sooner :)

编辑

Marting Hawskey 已对此进行了更新,以支持 AJAX 提交,而无需使用隐藏的 iframe.看这里.

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

这篇关于通过在浏览器中运行的 JavaScript 将数据推送到 Google 电子表格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)