Jak mogę uzyskać dostęp do arkuszy kalkulacyjnych Google tylko za pomocą JavaScript?


101

Chcę mieć dostęp do arkuszy kalkulacyjnych Google przy użyciu wyłącznie JavaScript (bez .NET, C #, Java itp.)

Przyjechałem tutaj i byłem zszokowany, gdy dowiedziałem się, że NIE MA API dla JavaScript, aby uzyskać dostęp do Arkuszy Google.

Proszę, powiedz mi, jak uzyskać dostęp (UTWÓRZ / EDYTUJ / USUŃ) Arkusze Google za pomocą JavaScript lub dowolnej z jego struktur, takich jak jQuery.


1
podany przez Ciebie link zawiera informacje o używaniu formatu JSON. powinieneś móc tego używać w JavaScript.
GSdo

1
@GSto byłoby pomocne, gdybyś mógł dać mi wgląd w to. Daj mi jeszcze raz tel. Chcę uzyskać dostęp do arkusza kalkulacyjnego Google za pośrednictwem javascript. Dzięki.
Pratik


Może warto rozważyć użycie Sheetsu. Jest to dość proste dla JSON API i ograniczone w bezpłatnej wersji, ale naprawdę upraszcza to, czego każdy programista powinien potrzebować do korzystania z arkuszy kalkulacyjnych Google. Mam nadzieję, że to pomoże niektórym ludziom.
Jester

Odpowiedzi:


60

Stworzyłem prostą bibliotekę javascript, która pobiera dane arkusza kalkulacyjnego Google (jeśli są opublikowane) za pośrednictwem interfejsu API JSON:

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

Możesz zobaczyć to w akcji tutaj:

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


3
To zaoszczędziło mi mnóstwo czasu. Dziękuję bardzo! Zdecydowałem się jednak na rozwidlenie kodu, aby móc obsługiwać puste komórki danych, a także organizować je w wiersze (dane zwracane w takiej postaci są po prostu gigantyczną tablicą komórek, ale ponieważ puste komórki nie były biorąc pod uwagę, nie było łatwego sposobu uporządkowania danych). Aktualizacja dotyczyła tylko Twojej metody callbackCells (). Sprawdź to: github.com/rw3iss/google-spreadsheet-javascript.git Jeszcze raz dziękuję stary!
Ryan Weiss,

5
Evan Plaice's answer stackoverflow.com/a/8666573/42082 zawiera bardziej szczegółowe informacje na temat oficjalnego interfejsu API Dokumentów Google i sposobu korzystania z arkusza kalkulacyjnego. Warte zobaczenia.
Ape-inago

nowa wersja API 3.0 i Oauth 2.0
PreguntonCojoneroCabrón

Wygląda na to, że Google zmieniło zasady i teraz jest zepsute.
Chirag

50

AKTUALIZACJA ze stycznia 2018 r . : Kiedy w zeszłym roku odpowiadałem na to pytanie, nie wspomniałem o trzecim sposobie dostępu do interfejsów API Google za pomocą JavaScript, a byłby to dostęp z aplikacji Node.js korzystających z biblioteki klienta, więc dodałem go poniżej.

Jest marzec 2017 r. I większość odpowiedzi tutaj jest nieaktualna - zaakceptowana odpowiedź dotyczy teraz biblioteki korzystającej ze starszej wersji API. Bardziej aktualna odpowiedź: dostęp do większości interfejsów API Google można uzyskać tylko za pomocą JavaScript. Google oferuje dziś trzy sposoby, aby to zrobić:

  1. Jak wspomniano w odpowiedzi Dana Dascalescu , możesz użyć Google Apps Script , rozwiązania JavaScript-in-Google w chmurze. Oznacza to, że aplikacje JS po stronie serwera inne niż węzeł poza przeglądarką, które działają na serwerach Google.
  2. Możesz również skorzystać z biblioteki klienta interfejsów API Google dla JavaScript, aby uzyskać dostęp do najnowszego interfejsu REST API Arkuszy Google po stronie klienta.
  3. Trzeci sposób uzyskiwania dostępu do interfejsów API Google za pomocą JavaScript pochodzi z aplikacji Node.js przy użyciu biblioteki klienta . Działa podobnie do korzystania z biblioteki klienta JavaScript (klienta) opisanej powyżej, tylko będziesz mieć dostęp do tego samego interfejsu API po stronie serwera. Oto przykład szybkiego startu Node.js dla Arkuszy. Powyższe filmy wideo oparte na Pythonie mogą być jeszcze bardziej przydatne, ponieważ one również uzyskują dostęp do interfejsu API po stronie serwera.

Korzystając z REST API, musisz zarządzać swoim kodem źródłowym i przechowywać go, a także przeprowadzać autoryzację poprzez toczenie własnego kodu autoryzacji (patrz przykłady powyżej). Apps Script zajmuje się tym w Twoim imieniu, zarządzając danymi (zmniejszając „ból”, o którym wspomina Ape-inago w odpowiedzi ), a Twój kod jest przechowywany na serwerach Google. Ale Twoja funkcjonalność jest ograniczona do usług, które zapewnia skrypt aplikacji, podczas gdy interfejs API REST zapewnia programistom znacznie szerszy dostęp do interfejsu API. Ale hej, dobrze jest mieć wybór, prawda? Podsumowując, aby odpowiedzieć na oryginalne pytanie OP, zamiast zera, programiści mają trzy sposoby uzyskiwania dostępu do Arkuszy Google za pomocą JavaScript.


35

Oto streszczenie.

Możesz utworzyć arkusz kalkulacyjny za pomocą interfejsu API Arkuszy Google . Obecnie nie ma możliwości usunięcia arkusza kalkulacyjnego za pomocą interfejsu API (przeczytaj dokumentację). Pomyśl o Google Docs API jako o drodze do tworzenia i wyszukiwania dokumentów.

Możesz dodawać / usuwać arkusze robocze w arkuszu kalkulacyjnym, korzystając z kanałów opartych na arkuszach .

Aktualizowanie arkusza kalkulacyjnego odbywa się za pośrednictwem kanałów informacyjnych opartych na liście lub kanałów opartych na komórkach .

Arkusz kalkulacyjny można odczytać za pomocą wspomnianych powyżej interfejsów API arkuszy kalkulacyjnych Google lub, tylko w przypadku opublikowanych arkuszy , za pomocą języka zapytań interfejsu API wizualizacji Google do wykonywania zapytań dotyczących danych (który może zwracać wyniki w formacie tabeli CSV, JSON lub HTML).


Zapomnij o jQuery. jQuery jest naprawdę wartościowe tylko wtedy, gdy przechodzisz przez DOM. Ponieważ GAS (Google Apps Scripting) nie używa DOM jQuery, nie doda żadnej wartości do Twojego kodu. Trzymaj się wanilii.

Jestem naprawdę zaskoczony, że nikt jeszcze nie podał tej informacji w odpowiedzi. Nie tylko można to zrobić, ale jest to stosunkowo łatwe przy użyciu waniliowego JS. Jedynym wyjątkiem jest interfejs API Google Visualization, który jest stosunkowo nowy (stan na 2011 r.). Interfejs API wizualizacji działa również wyłącznie za pośrednictwem identyfikatora URI ciągu zapytania HTTP.


13

Istnieje rozwiązanie, które nie wymaga opublikowania arkusza kalkulacyjnego. Jednak arkusz musi być „udostępniony”. Mówiąc dokładniej, należy udostępnić arkusz w taki sposób, aby każdy, kto ma link, miał dostęp do arkusza kalkulacyjnego. Po wykonaniu tej czynności można użyć interfejsu API HTTP Arkuszy Google.

Po pierwsze, potrzebujesz klucza Google API. Udaj się tutaj: https://developers.google.com/places/web-service/get-api-key NB. Pamiętaj o konsekwencjach bezpieczeństwa publicznego udostępnienia klucza API: https://support.google.com/googleapi/answer/6310037

Pobierz wszystkie dane do arkusza kalkulacyjnego - ostrzeżenie, może to być dużo danych.

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

Pobierz metadane arkusza

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

Uzyskaj zakres komórek

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

Teraz uzbrojony w te informacje, można użyć AJAX do pobierania danych, a następnie manipulowania nimi w JavaScript. Poleciłbym używanie 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);                                                                                                                                                       
  });                

Co to są dane siatki?
William Entriken

@WilliamEntriken Zawartość komórek.
robsco

11

Aktualizacja 2016 : Najłatwiej jest użyć Google Apps Script API, w szczególności usługi SpreadSheet Service . Działa to w przypadku arkuszy prywatnych, w przeciwieństwie do innych odpowiedzi, które wymagają opublikowania arkusza kalkulacyjnego.

Umożliwi to powiązanie kodu JavaScript z Arkuszem Google i wykonanie go po otwarciu arkusza lub po wybraniu elementu menu (który można zdefiniować).

Oto przewodnik Szybki start / Demo . Kod wygląda następująco:

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

Możesz także publikować takie skrypty jako aplikacje internetowe .


6

edycja: odpowiedź została udzielona przed opublikowaniem interfejsu API dokumentu Google. Zobacz odpowiedź Evan gładzicy jest i odpowiedź Dan Dăscălescu w celu uzyskania dodatkowych informacji up-to-date.

Wygląda na to, że możesz, ale używanie go jest trudne. Polega na wykorzystaniu Google Data API.

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

„Biblioteka klienta JavaScript zawiera metody pomocnicze dla Kalendarza, Kontaktów, Bloggera i Google Finance. Możesz jednak używać jej z niemal dowolnym interfejsem API danych Google, aby uzyskać dostęp do uwierzytelnionych / prywatnych kanałów. W tym przykładzie zastosowano DocList API.”

i przykład pisania gadżetu, który współpracuje z arkuszami kalkulacyjnymi: http://code.google.com/apis/spreadsheets/gadgets/


dlaczego nazywasz to „bólem”. Jaka jest w tym szkoda?
Pratik

1
Uciążliwe, ponieważ nie ma natywnego interfejsu API, co oznacza, że ​​musisz samodzielnie wykonać wiele analizowania i manipulowania danymi. natywny interfejs API arkusza kalkulacyjnego zapewni je za Ciebie.
Ape-inago

4

„Dostęp JavaScript do Google Docs” byłby żmudny w implementacji, a ponadto dokumentacja Google również nie jest taka prosta. Mam kilka dobrych linków do udostępnienia, dzięki którym możesz uzyskać dostęp js do 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

Może to by ci pomogło ...


8
Link 1 zostanie zaniechana W dniu 20 kwietnia 2015 roku, Link 2 404 error, Link 3 v2.0 przestarzałe, odnośnik 4 przestarzałe
vladkras


2

W tym szybko zmieniającym się świecie większość tych połączeń jest przestarzała.

Teraz możesz korzystać z internetowych interfejsów API Dysku Google :



ok, oto pełna lista produktów Google, w tym arkusz kalkulacyjny (łatwy do znalezienia za pomocą mojego pierwszego linku)
vladkras



1

Dane z arkuszy kalkulacyjnych Google możesz czytać w JavaScript za pomocą łącznika RGraph Sheet:

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

Początkowo (kilka lat temu) polegało to na niektórych funkcjach RGraph, aby działać - ale teraz może działać samodzielnie (tj. Nie wymaga wspólnej biblioteki RGraph).

Przykładowy kod (ten przykład tworzy wykres 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>

A teraz dostępna jest wersja PHP narzędzia do importowania - dostępna pod tym samym adresem URL
Richard

0

Buduję Steina, żeby ci w tym pomóc. Zapewnia również rozwiązanie wyłącznie w formacie HTML, jeśli chcesz wyświetlać dane bezpośrednio z arkusza. Sprawdź to na steinhq.com .

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.