Comment puis-je accéder aux feuilles de calcul Google Sheet uniquement avec Javascript?


101

Je souhaite accéder aux feuilles de calcul Google en utilisant uniquement JavaScript (pas de .NET, C #, Java, etc.)

Je suis venu ici et j'ai été choqué de savoir qu'il n'y a PAS d'API pour JavaScript pour accéder à Google Sheets.

Veuillez me dire comment accéder (CRÉER / MODIFIER / SUPPRIMER) Google Sheets à l'aide de JavaScript ou de l'un de ses frameworks comme jQuery.


1
le lien que vous avez fourni contient des informations sur l'utilisation de JSON. vous devriez pouvoir l'utiliser dans JavaScript.
GSto

1
@GSto, il serait utile que vous puissiez me donner un aperçu de cela.
Pratik


Vous voudrez peut-être envisager d'utiliser Sheetsu. C'est assez simple pour l'API JSON et limité avec la version gratuite, mais cela simplifie vraiment ce dont tout développeur devrait avoir besoin pour utiliser les feuilles de calcul Google. J'espère que cela aide certaines personnes.
Jester

Réponses:


60

J'ai créé une bibliothèque javascript simple qui récupère les données de la feuille de calcul Google (si elles sont publiées) via l'API JSON:

https://github.com/mikeymckay/google-spreadsheet-javascript

Vous pouvez le voir en action ici:

http://mikeymckay.github.com/google-spreadsheet-javascript/sample.html


3
Cela m'a fait gagner beaucoup de temps. Merci beaucoup! J'ai cependant décidé de bifurquer votre code, de pouvoir gérer des cellules vides de données et de l'organiser également en lignes (les données renvoyées telles quelles ne sont qu'un tableau géant de cellules, mais comme les cellules vides n'étaient pas prise en compte, il n’existait pas de moyen simple d’organiser les données). La mise à jour concernait uniquement votre méthode 'callbackCells ()'. Vérifiez-le: github.com/rw3iss/google-spreadsheet-javascript.git Merci encore mec!
Ryan Weiss

5
La réponse d'Evan Plaice, stackoverflow.com/a/8666573/42082, contient des informations plus détaillées sur l'API officielle de Google Docs et sur la façon d'utiliser la feuille de calcul. Vaut le détour.
Ape-inago

nouvelle version API 3.0 et Oauth 2.0
PreguntonCojoneroCabrón

On dirait que google a changé de politique et cela est maintenant rompu
Chirag le

50

MISE À JOUR janvier 2018 : Lorsque j'ai répondu à cette question l'année dernière, j'ai négligé de mentionner une troisième façon d'accéder aux API Google avec JavaScript, à partir des applications Node.js utilisant son bibliothèque cliente, je l'ai donc ajoutée ci-dessous.

Nous sommes en mars 2017 et la plupart des réponses ici sont obsolètes - la réponse acceptée fait désormais référence à une bibliothèque qui utilise une version plus ancienne de l'API. Une réponse plus actuelle: vous pouvez accéder à la plupart des API Google avec JavaScript uniquement. Google propose 3 façons de le faire aujourd'hui:

  1. Comme mentionné dans la réponse de Dan Dascalescu , vous pouvez utiliser Google Apps Script , la solution JavaScript-in-Google's-cloud. Autrement dit, les applications JS côté serveur non Node en dehors du navigateur qui s'exécutent sur les serveurs Google.
  2. Vous pouvez également utiliser la bibliothèque cliente des API Google pour JavaScript afin d'accéder à la dernière API REST de Google Sheets. côté client.
  3. La troisième façon d'accéder aux API Google avec JavaScript consiste à utiliser les applications Node.js à l'aide de sa bibliothèque cliente . Cela fonctionne de la même manière que l'utilisation de la bibliothèque cliente JavaScript (client) décrite ci-dessus, mais vous accéderez à la même API du côté serveur. Voici l'exemple de démarrage rapide de Node.js pour Sheets. Vous trouverez peut-être que les vidéos basées sur Python ci-dessus sont encore plus utiles car elles accèdent également à l'API du côté serveur.

Lorsque vous utilisez l'API REST, vous devez gérer et stocker votre code source ainsi qu'exécuter une autorisation en roulant votre propre code d'authentification (voir les exemples ci-dessus). Apps Script gère cela en votre nom, en gérant les données (réduisant la «douleur» comme mentionné par Ape-inago dans sa réponse ), et votre code est stocké sur les serveurs de Google. Mais vos fonctionnalités sont limitées aux services fournis par App Script, tandis que l'API REST donne aux développeurs un accès beaucoup plus large à l'API. Mais bon, c'est bien d'avoir des choix, non? En résumé, pour répondre à la question initiale du PO, au lieu de zéro, les développeurs ont trois façons d'accéder à Google Sheets en utilisant JavaScript.


35

Voici l'essentiel.

Vous pouvez créer une feuille de calcul à l'aide de l' API Google Sheets . Il n'existe actuellement aucun moyen de supprimer une feuille de calcul à l'aide de l'API (lire la documentation). Considérez l'API Google Docs comme le moyen de créer et de rechercher des documents.

Vous pouvez ajouter / supprimer des feuilles de calcul dans la feuille de calcul à l'aide des flux basés sur la feuille de calcul .

La mise à jour d'une feuille de calcul s'effectue via des flux basés sur des listes ou des flux basés sur des cellules .

La lecture de la feuille de calcul peut être effectuée via les API Google Spreadsheets mentionnées ci-dessus ou, pour les feuilles publiées uniquement , en utilisant le langage de requête de l' API Google Visualization pour interroger les données (qui peut renvoyer des résultats au format CSV, JSON ou HTML).


Oubliez jQuery. jQuery n'a vraiment de valeur que si vous parcourez le DOM. Comme GAS (Google Apps Scripting) n'utilise pas le DOM, jQuery n'ajoutera aucune valeur à votre code. Tenez-vous-en à la vanille.

Je suis vraiment surpris que personne n'ait encore fourni cette information dans une réponse. Non seulement cela peut être fait, mais c'est relativement facile à faire en utilisant vanilla JS. La seule exception étant l'API Google Visualization qui est relativement nouvelle (à partir de 2011). L'API de visualisation fonctionne également exclusivement via un URI de chaîne de requête HTTP.


13

Il existe une solution qui ne nécessite pas la publication de la feuille de calcul. Cependant, la feuille doit être «partagée». Plus précisément, il faut partager la feuille de manière à ce que toute personne disposant du lien puisse accéder à la feuille de calcul. Une fois que cela est fait, on peut utiliser l'API HTTP Google Sheets.

Tout d'abord, vous avez besoin d'une clé API Google. Allez ici: https://developers.google.com/places/web-service/get-api-key NB. Veuillez noter les ramifications de sécurité liées à la mise à disposition publique d'une clé API: https://support.google.com/googleapi/answer/6310037

Obtenez toutes les données pour une feuille de calcul - attention, cela peut être beaucoup de données.

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}&includeGridData=true

Obtenir les métadonnées de la feuille

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/?key={yourAPIKey}

Obtenez une plage de cellules

https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{sheetName}!{cellRange}?key={yourAPIKey}

Maintenant armé de ces informations, on peut utiliser AJAX pour récupérer des données puis les manipuler en JavaScript. Je recommanderais d'utiliser 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);                                                                                                                                                       
  });                

Que sont les données de grille?
William Entriken

@WilliamEntriken Le contenu des cellules.
robsco

11

Mise à jour 2016 : le moyen le plus simple consiste à utiliser l'API Google Apps Script, en particulier le service SpreadSheet . Cela fonctionne pour les feuilles privées, contrairement aux autres réponses qui nécessitent la publication de la feuille de calcul.

Cela vous permettra de lier le code JavaScript à une feuille Google et de l'exécuter lorsque la feuille est ouverte ou lorsqu'un élément de menu (que vous pouvez définir) est sélectionné.

Voici un démarrage rapide / une démo . Le code ressemble à ceci:

// 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;
}

Vous pouvez également publier de tels scripts sous forme d'applications Web .


6

edit: Cela a été répondu avant la publication de l'API de google doc. Voir la réponse d'Evan Plaice et celle de Dan Dascalescu pour plus d'informations à jour.

Il semble que vous pouvez, mais c'est pénible à utiliser. Cela implique l'utilisation de l'API de données Google.

http://gdatatips.blogspot.com/2008/12/using-javascript-client-library-w-non.html

"La bibliothèque cliente JavaScript propose des méthodes d'assistance pour Google Agenda, Contacts, Blogger et Google Finance. Cependant, vous pouvez l'utiliser avec à peu près n'importe quelle API Google Data pour accéder aux flux authentifiés / privés. Cet exemple utilise l'API DocList."

et un exemple d'écriture d'un gadget qui s'interface avec des feuilles de calcul: http://code.google.com/apis/spreadsheets/gadgets/


Pourquoi l'appeler comme «douleur». Quel mal en faisant cela?
Pratik

1
Un problème car il n'a pas d'API native, ce qui signifie que vous devez faire beaucoup d'analyse et de manipulation des données vous-même. une API de feuille de calcul native les fournirait pour vous.
Ape-inago

4

«JavaScript accédant à Google Docs» serait fastidieux à mettre en œuvre et de plus, la documentation de Google n'est pas aussi simple à obtenir. J'ai quelques bons liens à partager par lesquels vous pouvez accéder js à gdoc:

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

Peut-être que cela vous aiderait.


8
Le lien 1 sera obsolète Le 20 avril 2015, erreur lien 2 404, lien 3 v2.0 obsolète, lien 4 obsolète
vladkras

2

Désolé, c'est une mauvaise réponse. Apparemment, c'est un problème depuis près de deux ans, alors ne retenez pas votre souffle.

Voici la demande officielle que vous pouvez "star"

Le plus proche est probablement de déployer votre propre service avec Google App Engine / Python et d'exposer le sous-ensemble dont vous avez besoin avec votre propre bibliothèque JS. Bien que j'adorerais avoir une meilleure solution moi-même.





1

Vous pouvez lire les données des feuilles de calcul Google Sheets en JavaScript à l'aide du connecteur de feuilles RGraph:

https://www.rgraph.net/canvas/docs/import-data-from-google-sheets.html

Initialement (il y a quelques années), cela reposait sur certaines fonctions de RGraph pour fonctionner sa magie - mais maintenant il peut fonctionner de manière autonome (c'est-à-dire ne nécessitant pas la bibliothèque commune RGraph).

Quelques exemples de code (cet exemple crée un graphique 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>

Et maintenant, il y a une version PHP de l'utilitaire d'importation - disponible à la même URL
Richard

0

Je construis Stein pour vous aider à faire exactement cela. Il fournit également une solution HTML uniquement, si vous souhaitez afficher les données directement à partir de la feuille. Vérifiez-le sur steinhq.com .

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.