Wie kann ich nur mit Javascript auf Google Sheet-Tabellen zugreifen?


101

Ich möchte nur mit JavaScript auf Google Spreadsheets zugreifen (kein .NET, C #, Java usw.).

Ich kam hierher und war schockiert zu wissen, dass es KEINE API für JavaScript gibt, um auf Google Sheets zuzugreifen.

Bitte sagen Sie mir, wie ich mit JavaScript oder einem seiner Frameworks wie jQuery auf Google Sheets zugreifen (CREATE / EDIT / DELETE) kann.


1
Der von Ihnen angegebene Link enthält Informationen zur Verwendung von JSON. Sie sollten dies in JavaScript verwenden können.
GSto

1
@GSto es wäre hilfreich, wenn Sie mir einen Einblick in diese geben können. Lassen Sie mich erneut anrufen. Ich möchte über Javascript auf Google Spreadsheet zugreifen. Danke.
Pratik

1
Dies ist das vollständige Tutorial Entwickler.google.com/sheets/api/quickstart/js
FONGOH MARTIN

Vielleicht möchten Sie Sheetsu verwenden. Es ist ziemlich einfach für die JSON-API und mit der kostenlosen Version eingeschränkt, aber es vereinfacht wirklich, was jeder Entwickler für die Verwendung von Google-Tabellen benötigen sollte. Hoffe das hilft einigen Leuten.
Jester

Antworten:


60

Ich habe eine einfache Javascript-Bibliothek erstellt, die Google-Tabellenkalkulationsdaten (sofern veröffentlicht) über die JSON-API abruft:

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

Sie können es hier in Aktion sehen:

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


3
Das hat mir eine Menge Zeit gespart. Ich danke dir sehr! Ich habe mich jedoch entschlossen, Ihren Code zu teilen, um leere Datenzellen verarbeiten und in Zeilen organisieren zu können (die zurückgegebenen Daten sind nur ein riesiges Array von Zellen, aber da keine leeren Zellen vorhanden waren) berücksichtigt wurde, gab es keine einfache Möglichkeit, die Daten zu organisieren). Das Update wurde nur für Ihre 'callbackCells ()' - Methode durchgeführt. Probieren Sie es aus: github.com/rw3iss/google-spreadsheet-javascript.git Nochmals vielen Dank, Mann!
Ryan Weiss

5
Die Antwort von Evan Plaice auf stackoverflow.com/a/8666573/42082 enthält detailliertere Informationen zur offiziellen Google Text & Tabellen-API und zur Verwendung der Tabellenkalkulation. Einen Blick wert.
Ape-inago

neue Version API 3.0 und Oauth 2.0
PreguntonCojoneroCabrón

Sieht aus wie Google die Richtlinie geändert hat und dies ist jetzt gebrochen.
Chirag

50

Jan 2018 UPDATE : Als ich diese Frage letztes Jahr beantwortete, habe ich es versäumt, eine dritte Möglichkeit für den Zugriff auf Google-APIs mit JavaScript zu erwähnen , die von Node.js Apps über die Clientbibliothek stammt. Deshalb habe ich sie unten hinzugefügt.

Es ist März 2017 und die meisten Antworten hier sind veraltet. Die akzeptierte Antwort bezieht sich jetzt auf eine Bibliothek, die eine ältere API-Version verwendet. Eine aktuellere Antwort: Sie können nur mit JavaScript auf die meisten Google-APIs zugreifen. Google bietet heute drei Möglichkeiten, dies zu tun:

  1. Wie in der Antwort von Dan Dascalescu erwähnt , können Sie Google Apps Script verwenden , die Cloud-Lösung von JavaScript in Google. Das heißt, nicht knotenserverseitige JS-Apps außerhalb des Browsers, die auf Google-Servern ausgeführt werden.
  2. Sie können auch die Google APIs-Clientbibliothek für JavaScript verwenden um auf der auf die neueste Google Sheets-REST-API zuzugreifen .
  3. Die dritte Möglichkeit, mit JavaScript auf Google APIs zuzugreifen, besteht in Node.js Apps, die die Clientbibliothek verwenden . Es funktioniert ähnlich wie die oben beschriebene JavaScript (Client) -Client-Bibliothek, nur dass Sie von der Serverseite aus auf dieselbe API zugreifen. Hier ist das Nost.js-Schnellstartbeispiel für Sheets. Die oben genannten Python-basierten Videos sind möglicherweise noch nützlicher, da auch sie von der Serverseite aus auf die API zugreifen.

Wenn Sie die REST-API verwenden, müssen Sie Ihren Quellcode verwalten und speichern sowie die Autorisierung durchführen, indem Sie Ihren eigenen Authentifizierungscode rollen (siehe Beispiele oben). Apps Script kümmert sich in Ihrem Namen darum, verwaltet die Daten (reduziert den "Schmerz", wie von Ape-inago in der Antwort erwähnt ), und Ihr Code wird auf den Servern von Google gespeichert. Ihre Funktionalität beschränkt sich jedoch auf die Dienste, die App Script bereitstellt, während die REST-API Entwicklern einen viel breiteren Zugriff auf die API bietet. Aber hey, es ist gut, Entscheidungen zu treffen, oder? Zusammenfassend haben Entwickler zur Beantwortung der ursprünglichen OP-Frage anstelle von Null drei Möglichkeiten, mit JavaScript auf Google Sheets zuzugreifen.


35

Hier ist das Wesentliche.

Sie können eine Tabelle mit der Google Sheets-API erstellen . Es gibt derzeit keine Möglichkeit, eine Tabelle mithilfe der API zu löschen (siehe Dokumentation). Stellen Sie sich die Google Text & Tabellen-API als Route zum Erstellen und Nachschlagen von Dokumenten vor.

Sie können Arbeitsblätter innerhalb der Tabelle mithilfe der arbeitsblattbasierten Feeds hinzufügen / entfernen .

Das Aktualisieren einer Tabelle erfolgt entweder über listenbasierte Feeds oder über zellbasierte Feeds .

Das Lesen der Tabelle kann entweder über die oben genannten Google Spreadsheets-APIs oder nur für veröffentlichte Blätter mithilfe der Google Visualization API-Abfragesprache zum Abfragen der Daten erfolgen (die Ergebnisse im CSV-, JSON- oder HTML-Tabellenformat zurückgeben können).


Vergiss jQuery. jQuery ist nur dann wirklich wertvoll, wenn Sie das DOM durchlaufen. Da GAS (Google Apps Scripting) das DOM nicht verwendet, fügt jQuery Ihrem Code keinen Wert hinzu. Bleib bei Vanille.

Ich bin wirklich überrascht, dass noch niemand diese Informationen in einer Antwort angegeben hat. Dies ist nicht nur möglich , sondern auch relativ einfach mit Vanilla JS. Die einzige Ausnahme ist die Google Visualization API, die relativ neu ist (Stand 2011). Die Visualisierungs-API funktioniert auch ausschließlich über einen HTTP-Abfragezeichenfolgen-URI.


13

Es gibt eine Lösung, für die keine Veröffentlichung der Tabelle erforderlich ist. Das Blatt muss jedoch freigegeben sein. Insbesondere muss das Blatt so freigegeben werden, dass jeder mit dem Link auf das Arbeitsblatt zugreifen kann. Sobald dies erledigt ist, kann man die Google Sheets HTTP API verwenden.

Zunächst benötigen Sie einen Google API-Schlüssel. Gehen Sie hier: https://developers.google.com/places/web-service/get-api-key NB. Beachten Sie die Sicherheitsauswirkungen der Bereitstellung eines API-Schlüssels für die Öffentlichkeit: https://support.google.com/googleapi/answer/6310037

Holen Sie sich alle Daten für eine Tabelle - Warnung, dies können viele Daten sein.

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

Blattmetadaten abrufen

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

Holen Sie sich eine Reihe von Zellen

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

Mit diesen Informationen kann man nun AJAX verwenden, um Daten abzurufen und sie dann in JavaScript zu bearbeiten. Ich würde die Verwendung von Axios empfehlen .

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

Was sind Gitterdaten?
William Entriken

@WilliamEntriken Der Inhalt der Zellen.
Robsco

11

Update 2016 : Am einfachsten ist die Verwendung der Google Apps Script-API, insbesondere des SpreadSheet-Dienstes . Dies funktioniert für private Blätter, im Gegensatz zu den anderen Antworten, bei denen die Tabelle veröffentlicht werden muss.

Auf diese Weise können Sie JavaScript-Code an ein Google Sheet binden und ausführen, wenn das Blatt geöffnet wird oder wenn ein Menüelement (das Sie definieren können) ausgewählt ist.

Hier ist ein Schnellstart / eine Demo . Der Code sieht folgendermaßen aus:

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

Du kannst auch solche Skripte auch als Web-Apps veröffentlichen .


6

Bearbeiten: Dies wurde beantwortet, bevor die API des Google Docs veröffentlicht wurde. Siehe Evan Plaice Antwort und Dan Dascalescu Antwort für mehr up-to-date Informationen.

Es sieht so aus, als ob du es kannst, aber es ist ein Schmerz, es zu benutzen. Dabei wird die Google-Daten-API verwendet.

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

"Die JavaScript-Clientbibliothek verfügt über Hilfsmethoden für Kalender, Kontakte, Blogger und Google Finanzen. Sie können sie jedoch mit nahezu jeder Google Data-API verwenden, um auf authentifizierte / private Feeds zuzugreifen. In diesem Beispiel wird die DocList-API verwendet."

und ein Beispiel für das Schreiben eines Gadgets, das mit Tabellenkalkulationen verbunden ist: http://code.google.com/apis/spreadsheets/gadgets/


Warum nennst du es "Schmerz"? Was schadet dabei?
Pratik

1
Ein Schmerz, weil es keine native API gibt, was bedeutet, dass Sie selbst viel analysieren und Daten manipulieren müssen. Eine native Tabellenkalkulations-API würde diese für Sie bereitstellen.
Ape-inago

4

Die Implementierung von "JavaScript-Zugriff auf Google Text & Tabellen" wäre mühsam, und außerdem ist die Google-Dokumentation nicht so einfach zu beschaffen. Ich habe einige gute Links zu teilen, über die Sie js Zugriff auf gdoc erreichen können:

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

Vielleicht würden diese Ihnen helfen ..


8
Link 1 ist veraltet Am 20. April 2015 ist Link 2 404-Fehler, Link 3 v2.0 veraltet, Link 4 veraltet
vladkras





1

Sie können die Daten von Google Sheets-Tabellen in JavaScript mithilfe des RGraph Sheets-Connectors lesen:

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

Ursprünglich (vor einigen Jahren) stützte sich dies auf einige RGraph-Funktionen, um seine Magie zu entfalten - aber jetzt kann es eigenständig arbeiten (dh es wird keine gemeinsame RGraph-Bibliothek benötigt).

Einige Beispielcodes (in diesem Beispiel wird ein RGraph-Diagramm erstellt):

<!-- 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>

Und jetzt gibt es eine PHP-Version des Import-Dienstprogramms - verfügbar unter derselben URL
Richard

0

Ich baue Stein aus, um Ihnen dabei zu helfen. Es bietet auch eine reine HTML-Lösung, falls Sie Daten direkt aus dem Blatt anzeigen möchten. Schau es dir auf steinhq.com an .

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.