Como posso acessar as planilhas do Planilhas Google apenas com Javascript?

101

Desejo acessar as planilhas do Google usando apenas JavaScript (sem .NET, C #, Java, etc.)

Eu vim aqui e fiquei chocado ao saber que NÃO há API para JavaScript para acessar o Planilhas Google.

Diga-me como acessar (CRIAR / EDITAR / EXCLUIR) Planilhas Google usando JavaScript ou qualquer um de seus frameworks como jQuery.

Pratik
fonte
1
o link que você forneceu contém informações sobre como usar JSON. você deve ser capaz de usar isso em JavaScript.
GS a
1
@GSto seria útil se você pudesse me fornecer algumas dicas sobre isso. Deixe-me tel u novamente, eu quero acessar a planilha do Google via javascript. Obrigado.
Pratik
1
Este é o tutorial completo developers.google.com/sheets/api/quickstart/js
FONGOH MARTIN
Talvez você queira considerar o uso do Sheetsu. É bastante simples para a API JSON e limitado pela versão gratuita, mas realmente simplifica o que qualquer desenvolvedor precisa para usar as planilhas do Google. Espero que isso ajude algumas pessoas.
Jester

Respostas:

60

Eu criei uma biblioteca javascript simples que recupera os dados da planilha do Google (se forem publicados) por meio da API JSON:

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

Você pode ver isso em ação aqui:

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

Mike McKay
fonte
3
Isso me economizou muito tempo. Muito obrigado! Decidi, no entanto, bifurcar seu código, para ser capaz de lidar com células vazias de dados e também organizá-lo em linhas (os dados sendo retornados como estão são apenas uma matriz gigante de células, mas como células vazias não estavam sendo levado em consideração, não havia uma maneira fácil de organizar os dados). A atualização foi apenas para seu método 'callbackCells ()'. Confira: github.com/rw3iss/google-spreadsheet-javascript.git Obrigado novamente, cara!
Ryan Weiss,
5
A resposta stackoverflow.com/a/8666573/42082 de Evan Plaice tem informações mais detalhadas sobre a API oficial do Google Docs e como usar a de planilha. Vale a pena dar uma olhada.
Ape-inago
nova versão API 3.0 e Oauth 2.0
PreguntonCojoneroCabrón
Parece que o Google mudou a política e isso está quebrado agora.
Chirag
50

ATUALIZAÇÃO DE janeiro de 2018 : Quando respondi a essa pergunta no ano passado, esqueci de mencionar uma terceira forma de acessar APIs do Google com JavaScript, que seria a partir de aplicativos Node.js usando sua biblioteca cliente, então adicionei abaixo.

É março de 2017 e a maioria das respostas aqui está desatualizada - a resposta aceita agora se refere a uma biblioteca que usa uma versão de API mais antiga. Uma resposta mais atual: você pode acessar a maioria das APIs do Google apenas com JavaScript. O Google oferece três maneiras de fazer isso hoje:

  1. Conforme mencionado na resposta de Dan Dascalescu , você pode usar o Google Apps Script , a solução JavaScript na nuvem do Google. Ou seja, aplicativos JS do lado do servidor não Node fora do navegador que são executados nos servidores do Google.
  2. Você também pode usar a biblioteca cliente de APIs do Google para JavaScript para acessar a API REST do Planilhas Google mais recente no lado do cliente.
  3. A terceira forma de acessar APIs do Google com JavaScript é a partir de aplicativos Node.js usando sua biblioteca cliente . Funciona de maneira semelhante ao uso da biblioteca cliente JavaScript (cliente) descrita acima, mas você acessará a mesma API do lado do servidor. Este é o exemplo de início rápido do Node.js para o Planilhas. Você pode achar os vídeos baseados em Python acima ainda mais úteis, já que eles também acessam a API do lado do servidor.

Ao usar a API REST, você precisa gerenciar e armazenar seu código-fonte, bem como executar a autorização rolando seu próprio código de autenticação (consulte os exemplos acima). Apps Script lida com isso em seu nome, gerenciando os dados (reduzindo a "dor", conforme mencionado por Ape-inago em sua resposta ), e seu código é armazenado nos servidores do Google. Mas sua funcionalidade é restrita aos serviços que o App Script fornece, enquanto a API REST oferece aos desenvolvedores um acesso muito mais amplo à API. Mas hey, é bom ter escolhas, certo? Em resumo, para responder à pergunta original do OP, em vez de zero, os desenvolvedores têm três maneiras de acessar o Planilhas Google usando JavaScript.

meloso
fonte
35

Aqui está a essência.

Você pode criar uma planilha usando a API do Planilhas Google . Atualmente, não há como excluir uma planilha usando a API (leia a documentação). Pense na API do Google Docs como a rota para criar e pesquisar documentos.

Você pode adicionar / remover planilhas dentro da planilha usando os feeds baseados em planilhas .

A atualização de uma planilha é feita por meio de feeds baseados em lista ou feeds baseados em células .

A leitura da planilha pode ser feita por meio das APIs de planilhas do Google mencionadas acima ou, apenas para planilhas publicadas , usando a linguagem de consulta da API de visualização do Google para consultar os dados (que pode retornar resultados em formato de tabela CSV, JSON ou HTML).


Esqueça o jQuery. jQuery só é realmente valioso se você estiver atravessando o DOM. Como o GAS (Google Apps Scripting) não usa o DOM, o jQuery não agregará valor ao seu código. Limite-se à baunilha.

Estou realmente surpreso que ninguém forneceu essa informação em uma resposta ainda. Isso não só pode ser feito, mas é relativamente fácil de fazer usando o vanilla JS. A única exceção é a API de visualização do Google, que é relativamente nova (em 2011). A API de visualização também funciona exclusivamente por meio de um URI de string de consulta HTTP.

Evan Solha
fonte
13

Existe uma solução que não exige a publicação da planilha. No entanto, a planilha precisa ser 'Compartilhada'. Mais especificamente, é necessário compartilhar a planilha de forma que qualquer pessoa com o link possa acessar a planilha. Feito isso, pode-se usar a API HTTP do Google Sheets.

Primeiro, você precisa de uma chave de API do Google. Acesse aqui: https://developers.google.com/places/web-service/get-api-key NB. Esteja ciente das ramificações de segurança de ter uma chave de API disponibilizada ao público: https://support.google.com/googleapi/answer/6310037

Obtenha todos os dados para uma planilha - aviso, podem ser muitos dados.

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

Obter metadados da planilha

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

Obtenha um intervalo de células

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

Agora, munido dessas informações, pode-se usar AJAX para recuperar dados e, em seguida, manipulá-los em JavaScript. Eu recomendaria usar 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);                                                                                                                                                       
  });                
robsco
fonte
O que são dados da grade?
William Entriken
@WilliamEntriken O conteúdo das células.
robsco
11

Atualização de 2016 : A maneira mais fácil é usar a API do Google Apps Script, em particular o SpreadSheet Service . Isso funciona para planilhas privadas, ao contrário das outras respostas que exigem a publicação da planilha.

Isso permitirá que você vincule o código JavaScript a uma Planilha Google e execute-o quando a planilha for aberta ou quando um item de menu (que você pode definir) for selecionado.

Aqui está um Quickstart / Demo . O código é parecido com este:

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

Você também pode publicar scripts como aplicativos da web .

Dan Dascalescu
fonte
6

editar: Isso foi respondido antes do lançamento da API do Google Doc. Veja a resposta de Evan Plaice e a resposta de Dan Dascalescu para obter informações mais atualizadas.

Parece que você pode, mas é uma dor de usar. Envolve o uso da API de dados do Google.

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

"A biblioteca cliente JavaScript possui métodos auxiliares para Agenda, Contatos, Blogger e Google Finance. No entanto, você pode usá-la com praticamente qualquer API de dados do Google para acessar feeds autenticados / privados. Este exemplo usa a API DocList."

e um exemplo de como escrever um gadget que faz interface com planilhas: http://code.google.com/apis/spreadsheets/gadgets/

Ape-inago
fonte
por que você chama isso de "dor". o que há de errado em fazer isso?
Pratik
1
Uma dor porque não tem uma API nativa, o que significa que você mesmo precisa fazer muita análise e manipulação de dados. uma API de planilha nativa forneceria isso para você.
Ape-inago
4

'JavaScript acessando Google Docs' seria entediante de implementar e, além disso, a documentação do Google também não é tão simples de obter. Tenho alguns bons links para compartilhar pelos quais você pode obter acesso js ao 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

Pode ser que eles ajudem você ..

Pratik
fonte
8
link 1 será descontinuado Em 20 de abril de 2015, erro do link 2 404, link 3 v2.0 descontinuado, link 4 descontinuado
vladkras
2

Desculpe, esta é uma resposta péssima. Aparentemente, isso tem sido um problema há quase dois anos, então não prenda a respiração.

Aqui está o pedido oficial para que você possa "estrelar"

Provavelmente, o mais perto que você pode chegar é lançar seu próprio serviço com o Google App Engine / Python e expor qualquer subconjunto de que você precisa com sua própria biblioteca JS. Embora eu adorasse ter uma solução melhor para mim.

mjhm
fonte
1

Para esse tipo de coisa, você deve usar o Google Fusion Tables . A API foi projetada para esse propósito.

Tim
fonte
Não é uma boa ideia. O Google vai encerrá-lo. Downvoting it.
A_01
1

Você pode ler os dados das planilhas do Google Sheets em JavaScript usando o conector de planilhas RGraph:

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

Inicialmente (alguns anos atrás) isso dependia de algumas funções do RGraph para fazer sua mágica - mas agora pode funcionar de forma autônoma (ou seja, não requerendo a biblioteca comum RGraph).

Algum código de exemplo (este exemplo cria um gráfico 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>
Richard
fonte
E agora há uma versão PHP do utilitário de importação - disponível no mesmo URL
Richard
0

Estou construindo Stein para ajudá-lo a fazer exatamente isso. Ele também fornece uma solução somente HTML, caso você deseje exibir dados diretamente da planilha. Confira em steinhq.com .

Shiven Sinha
fonte