web-dev-qa-db-fra.com

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

Je souhaite accéder à Google Spreadsheets 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 AUCUNE API JavaScript permettant d'accéder à Google Sheets.

Dites-moi comment accéder à (CREATE/EDIT/DELETE) Google Sheets à l'aide de JavaScript ou de l'un de ses frameworks tels que jQuery.

javascriptgoogle-apigoogle-sheets-apigoogle-data-apigoogle-api-js-client
93
Pratik

J'ai créé une bibliothèque javascript simple qui récupère les données de 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

53
Mike McKay

Janvier 2018 MISE À JOUR : Lorsque j'ai répondu à cette question l'année dernière, j'ai négligé de mentionner un tiers moyen d'accéder aux API Google. avec JavaScript, et cela proviendrait des applications Node.js utilisant its bibliothèque client, je l’ai donc ajoutée ci-dessous.

C'est mars 2017, et la plupart des réponses ici sont périmées - la réponse acceptée fait désormais référence à une bibliothèque qui utilise une ancienne version de l'API. Une réponse plus actuelle: vous pouvez accéder à à la plupart des API Google avec JavaScript uniquement. Google propose 3 méthodes pour le faire aujourd'hui:

  1. Comme mentionné dans le answer de Dan Dascalescu , vous pouvez utiliser Script Google Apps , le code JavaScript de Google solution de nuage. C'est-à-dire des applications JS côté serveur non-nœud en dehors du navigateur qui s'exécutent sur des serveurs Google.
  2. Vous pouvez également utiliser la bibliothèque cliente de Google APIs pour JavaScript pour accéder aux derniers Google Sheets REST API côté client.
  3. Le troisième moyen d'accéder aux API Google avec JavaScript est d'utiliser les applications Node.js utilisant sa bibliothèque cliente . Cela fonctionne de la même manière que si vous utilisiez la bibliothèque cliente JavaScript (client) décrite ci-dessus, mais que vous accéderez à la même API à partir du serveur. Voici l'exemple de démarrage rapide de Node.js pour les feuilles. Vous trouverez peut-être que les vidéos 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 que procéder à une autorisation en lançant votre propre code d'autorisation (voir exemples ci-dessus). Apps Script le gère en votre nom, en gérant les données (réduisant la "douleur" comme mentionné par Ape-inago dans leur réponse /), et votre code est stocké sur les serveurs de Google. Mais votre fonctionnalité est limitée à quels services App Script fournit et est plus ancien que JS (ES3 + certaines fonctionnalités de ES5 et personnalisations de Google) alors que l'API REST donne aux développeurs un accès beaucoup plus large à l'API. Mais bon, il est bon d'avoir des choix, n'est-ce pas? En résumé, pour répondre à la question initiale du PO, au lieu de zéro, les développeurs disposent de trois façons d'accéder à Google Sheets à l'aide de JavaScript.

44
wescpy

Voici le Gist.

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

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

La mise à jour d'une feuille de calcul s'effectue par l'intermédiaire de flux basés sur des listes ou 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 de visualisation Google pour interroger les données ( pouvant renvoyer des résultats au format de tableau CSV, JSON ou HTML).

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

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

34
Evan Plaice

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

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

Voici un Quickstart/Demo . 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 des scripts tels que des applications Web .

11
Dan Dascalescu

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

Tout d'abord, vous avez besoin d'une clé API Google. Cliquez ici: https://developers.google.com/places/web-service/get-api-key NB. Tenez compte des ramifications de sécurité liées à la mise à la disposition du public d'une clé API: https://support.google.com/googleapi/answer/6310037

Obtenir toutes les données d'un tableur - avertissement, il peut s'agir de 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}

Obtenir une gamme de cellules

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

Maintenant armé de cette information, 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);                                                                                                                                                       
  });
7
robsco

edit: Cette question a été résolue avant la publication de l'API de Google Doc. Voir réponse d'Evan Plaice et réponse de Dan Dascalesc pour des informations plus récentes.

On dirait 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 comporte des méthodes d'assistance pour Agenda, Contacts, Blogger et Google Finance. Toutefois, vous pouvez l'utiliser avec à peu près n'importe quelle API Google Data pour accéder à des flux authentifiés/privés. Cet exemple utilise l'API DocList."

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

6
Ape-inago

Il serait fastidieux d'implémenter "l'accès JavaScript à Google Documents" et, en outre, la documentation de Google n'est pas aussi simple à obtenir. J'ai quelques bons liens à partager par lesquels vous pouvez obtenir un accès 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/[email protected]/msg01924.html

Peut-être que cela vous aiderait ..

4
Pratik

Désolé, c'est une réponse moche. Apparemment, cela fait n problème depuis presque deux ans, alors ne retenez pas votre souffle.

Voici la demande officielle que vous pouvez "star"

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

2
mjhm

Dans ce monde en mutation rapide, la plupart de ces liens sont obsolètes.

Vous pouvez maintenant utiliser les API Web de Google Drive :

2
vladkras

Pour ce type d’utilisation, utilisez Google Fusion Tables . Le API est conçu à cet effet.

1
Tim

vous pouvez le faire en utilisant Sheetsee.js et tabletop.js

  1. exemple de git
  2. n autre exemple
1
Deep Shah

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

0
Shiven Sinha

Vous pouvez lire les données de feuilles de calcul Google Sheets en JavaScript en utilisant le 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 de manière magique - mais maintenant, il peut fonctionner en mode autonome (c'est-à-dire ne nécessitant pas la bibliothèque commune de 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>
0
Richard