it-swarm.dev

Como posso acessar as planilhas do Google Sheet somente com Javascript?

Desejo acessar o Google Spreadsheets usando apenas JavaScript (sem .NET, C #, Java, etc.)

Eu vim aqui e fiquei chocado ao saber que não há API para JavaScript acessar o Planilhas Google.

Por favor, diga-me como acessar (CREATE/EDIT/DELETE) o Google Sheets usando JavaScript ou qualquer um de seus frameworks como o jQuery.

92
Pratik

Eu criei uma biblioteca javascript simples que recupera dados da planilha do google (se eles forem publicados) através da JSON api:

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

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

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

53
Mike McKay

JAN 2018 UPDATE : Quando eu respondi a esta pergunta no ano passado, deixei de mencionar um terceiro caminho para acessar as APIs do Google com JavaScript, e isso seria de aplicativos Node.js usando its biblioteca cliente, então eu adicionei abaixo.

É mar 2017 , e a maioria das respostas aqui estão desatualizadas - 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 fornece três maneiras de fazer isso hoje:

  1. Como mencionado no resposta de Dan Dascalesc , você pode usar Script do Google Apps , a solução de nuvem JavaScript do Google. Ou seja, aplicativos JS não do lado do servidor fora do navegador que são executados nos servidores do Google.
  2. Você também pode usar o Biblioteca de cliente de APIs do Google para JavaScript para acessar as mais recentes Google Sheets REST API no lado do cliente.
  3. A terceira maneira de acessar as APIs do Google com JavaScript é de aplicativos do Node.js usando sua biblioteca de clientes . Ele funciona de maneira semelhante ao uso da biblioteca cliente JavaScript (cliente) descrita acima, somente você acessará a mesma API do lado do servidor. Aqui está o exemplo de início rápido do Node.js para o Planilhas. Você pode encontrar os vídeos baseados em Python acima para ser ainda mais útil, pois 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 (veja os exemplos acima). O Google Apps Script lida com isso em seu nome, gerenciando os dados (reduzindo a "dor" mencionada pelo Ape-inago em sua resposta ), e seu código é armazenado nos servidores do Google. Mas sua funcionalidade é restrita aos serviços fornecidos pelo App Script e seu JS mais antigo (ES3 + alguns recursos do ES5 e personalizações do Google), enquanto a API REST fornece aos desenvolvedores um acesso muito mais amplo à API. Mas ei, é bom ter escolhas, certo? Em resumo, para responder a pergunta original do OP, em vez de zero, os desenvolvedores têm três maneiras de acessar o Planilhas Google usando JavaScript.

41
wescpy

Aqui está a essência

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

Você pode adicionar/remover planilhas na planilha usando o feeds baseados em planilhas .

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

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


Esqueça jQuery. O jQuery só é realmente valioso se você estiver percorrendo o DOM. Como o GAS (Google Apps Scripting) não usa o DOM, o jQuery não adiciona nenhum valor ao seu código. Fique com baunilha.

Estou realmente surpreso que ninguém tenha fornecido essa informação em uma resposta ainda. Não apenas pode ser feito, mas é relativamente fácil de usar usando o Vanilla JS. A única exceção é a API de visualização do Google, que é relativamente nova (a partir de 2011). A API de visualização também funciona exclusivamente por meio de um URI de string de consulta HTTP.

34
Evan Plaice

Atualização de 2016 : a maneira mais fácil é usar a API de script do Google Apps, especialmente o Serviço SpreadSheet . Isso funciona para planilhas privadas, diferente das outras respostas que exigem que a planilha seja publicada.

Isso permitirá vincular o código JavaScript a uma Planilha Google e executá-lo quando a planilha for aberta ou quando um item de menu (que você puder definir) estiver selecionado.

Aqui está um Quickstart/Demo . O código é assim:

// 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 tais scripts como aplicativos da web .

10
Dan Dascalescu

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

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 para o público: https://support.google.com/googleapi/answer/6310037

Obtenha todos os dados de uma planilha - aviso, isso pode ser um monte de dados.

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

Obter metadados da folha

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

Obter um intervalo de células

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

Agora armado com esta informação, pode-se usar AJAX para recuperar dados e depois 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);                                                                                                                                                       
  });                
6
robsco

edit: Isso foi respondido antes que a API do google doc fosse lançada. Veja resposta de Evan Plaice e resposta de Dan Dascalesc para 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 tem métodos auxiliares para o Google 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. Esse 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/

6
Ape-inago

"JavaScript acessando o Google Docs" seria tedioso para implementar e, além disso, a documentação do Google também não é tão simples de obtê-lo. Eu 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 isso ajudaria você ..

4
Pratik

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

Aqui está o pedido oficial que você pode "estrela"

Provavelmente, o mais próximo que você pode chegar é rolar seu próprio serviço com o Google App Engine/Python e expor o subconjunto que você precisa com sua própria biblioteca JS. Embora eu adoraria ter uma solução melhor eu mesmo.

2
mjhm

Neste mundo em rápida mudança, a maioria desses links é obsoleta.

Agora você pode usar APIs do Google Drive na Web :

2
vladkras

Para esse tipo de coisa você deve usar Google Fusion Tables . O API é projetado para essa finalidade.

2
Tim

você pode fazer isso usando Sheetsee.js e tabletop.js

  1. exemplo do git
  2. outro exemplo
1
Deep Shah

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

0
Shiven Sinha

Você pode ler os dados das planilhas do Planilhas Google em JavaScript usando o conector de folhas 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 trabalhar sua mágica - mas agora ele pode funcionar autônomo (ou seja, não requerendo a biblioteca comum do RGraph ).

Algum código de exemplo (este exemplo faz 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>
0
Richard