web-dev-qa-db-fra.com

Transmission de données à une feuille de calcul Google via JavaScript exécuté dans le navigateur

Je travaille sur une application Web où j'aimerais permettre à l'utilisateur de pousser des données vers sa propre feuille de calcul Google.

Tout d'abord, j'ai essayé d'utiliser Bibliothèque cliente des API Google pour JavaScript mais cela ne semble pas couvrir l'API Spreadsheet ( https://developers.google.com/apis-Explorer/#p / ).

J'ai alors décidé d'utiliser directement la Google Spreadsheets API version 3. . Je parviens à récupérer les feuilles de calcul de l'utilisateur à l'aide de jQuery et 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
  }
});

Dans la même méthode, je récupère les feuilles de la feuille de calcul sélectionnée par l'utilisateur. Ensuite, je dois POST les données de la feuille sélectionnée. Et voici le problème: ne peut pas le faire en utilisant JSONP. Et le serveur Google ne semble pas prendre en charge CORS. J'obtiens l'erreur suivante dans le navigateur:

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

Merci d'avoir étudié cela.

17
Martin Dimitrov

J'examinais cela aussi environ 8 mois. Je suis tombé sur n article de blog écrit par Martin Hawskey . J'ai suivi le guide ici et j'ai pu configurer une publication de formulaire HTML dans une feuille de calcul.

En effet, vous configurez une application Web publiée dans la feuille de calcul qui peut recevoir les données. Pour contourner les problèmes CORS, vous ciblez un iframe caché sur la page. Je répliquerais le code dans cet article mais il y en a une bonne partie.

[~ # ~] démo [~ # ~]

Je vais vous donner quelques conseils que j'aurais aimé recevoir lorsque j'ai commencé à regarder cela. Si vous le pouvez ... essayez de configurer un serveur PHP que vous pouvez utiliser. La publication des données est beaucoup plus facile et flexible. J'utilise maintenant Zend GData religieusement à travailler et je souhaite l'avoir trouvé plus tôt :)

[~ # ~] modifier [~ # ~]

Marting Hawskey a mis à jour cela pour prendre en charge une soumission AJAX sans l'utilisation d'un iframe caché. voir ici .

22
dev

Pas à pas instructions avec captures d'écran

Après avoir lu Martin Hawskey s bon introduction ( à envoyer des données d'un formulaire HTML à une feuille de calcul Google) et voir quelques lacunes/hypothèses, nous avons décidé d'écrire un tutoriel détaillé/complet avec des instructions étape par étape qui a peu personnes ont trouvé utile:

https://github.com/dwyl/ html -form- envoyer - email via - google-script - sans serveur

Le script enregistre toutes les données envoyées via HTTP POST dans la feuille de calcul Google et éventuellement transfère le contenu à une adresse e-mail. ( utile si vous souhaitez être informé des nouvelles données)

Formulaire HTML:

contact form

Résultat ( ligne dans la feuille):

row in sheet

J'espère que cela aide les autres.

29
nelsonic