¿Cómo puedo acceder a las hojas de cálculo de Google Sheet solo con Javascript?


101

Quiero acceder a Google Spreadsheets usando solo JavaScript (no .NET, C #, Java, etc.)

Vine aquí y me sorprendió saber que NO hay API para JavaScript para acceder a Google Sheets.

Por favor dígame cómo acceder (CREAR / EDITAR / ELIMINAR) Hojas de cálculo de Google usando JavaScript o cualquiera de sus marcos como jQuery.


1
el enlace que proporcionó tiene información sobre el uso de JSON. debería poder usar eso en JavaScript.
GSto

1
@GSto sería útil si me puede dar una idea de esto. Déjeme decirle de nuevo que quiero acceder a la hoja de cálculo de Google a través de javascript. Gracias.
Pratik


Es posible que desee considerar el uso de Sheetsu. Es bastante simple para la API JSON y está limitado con la versión gratuita, pero realmente simplifica lo que cualquier desarrollador debería necesitar para usar hojas de cálculo de Google. Espero que esto ayude a algunas personas.
Jester

Respuestas:


60

He creado una biblioteca de JavaScript simple que recupera datos de la hoja de cálculo de Google (si están publicados) a través de la API de JSON:

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

Puedes verlo en acción aqui:

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


3
Esto me ahorró mucho tiempo. Muchas gracias! Sin embargo, decidí bifurcar su código para poder manejar celdas vacías de datos y también organizarlo en filas (los datos que se devuelven como están son solo una matriz gigante de celdas, pero dado que las celdas vacías no estaban siendo teniendo en cuenta, no había una forma fácil de organizar los datos). La actualización fue solo para su método 'callbackCells ()'. Échale un vistazo: github.com/rw3iss/google-spreadsheet-javascript.git ¡ Gracias de nuevo, hombre!
Ryan Weiss

5
La respuesta de Evan Plaice stackoverflow.com/a/8666573/42082 tiene información más detallada sobre la API oficial de Google Docs y cómo usar la hoja de cálculo. Digno de una mirada.
Ape-inago

nueva versión API 3.0 y Oauth 2.0
PreguntonCojoneroCabrón

Parece que Google cambió la política y ahora no funciona.
Chirag

50

ACTUALIZACIÓN de enero de 2018 : cuando respondí esta pregunta el año pasado, olvidé mencionar una tercera forma de acceder a las API de Google con JavaScript, y eso sería desde las aplicaciones Node.js que usan su biblioteca cliente, así que la agregué a continuación.

Sus marzo de 2017 , y la mayoría de las respuestas aquí están desactualizadas; la respuesta aceptada ahora se refiere a una biblioteca que usa una versión de API anterior. Una respuesta más actual: puede acceder a la mayoría de las API de Google solo con JavaScript. Google ofrece 3 formas de hacer esto hoy:

  1. Como se menciona en el respuesta de Dan Dascalescu , puede utilizar Google Apps Script , la solución de JavaScript en la nube de Google. Es decir, aplicaciones JS del lado del servidor que no son de nodo fuera del navegador que se ejecutan en los servidores de Google.
  2. También puede utilizar la biblioteca cliente de las API de Google para JavaScript. para acceder a la última API de REST de Google Sheets en el lado del cliente.
  3. La tercera forma de acceder a las API de Google con JavaScript es desde las aplicaciones Node.js utilizando su biblioteca cliente . Funciona de manera similar al uso de la biblioteca cliente de JavaScript (cliente) descrita anteriormente, solo que accederá a la misma API desde el lado del servidor. Este es el ejemplo de inicio rápido de Node.js para Hojas de cálculo. Puede encontrar que los videos basados ​​en Python anteriores son aún más útiles, ya que también acceden a la API desde el lado del servidor.

Al usar la API REST, debe administrar y almacenar su código fuente, así como realizar la autorización mediante la implementación de su propio código de autenticación (consulte los ejemplos anteriores). Apps Script maneja esto en su nombre, administrando los datos (reduciendo el "dolor" como lo menciona Ape-inago en su respuesta ), y su código se almacena en los servidores de Google. Pero su funcionalidad está restringida a los servicios que proporciona App Script, mientras que la API REST brinda a los desarrolladores un acceso mucho más amplio a la API. Pero bueno, es bueno tener opciones, ¿verdad? En resumen, para responder a la pregunta original de OP, en lugar de cero, los desarrolladores tienen tres formas de acceder a Google Sheets usando JavaScript.


35

Aquí está la esencia.

Puede crear una hoja de cálculo utilizando la API de Google Sheets . Actualmente no hay forma de eliminar una hoja de cálculo usando la API (lea la documentación). Piense en la API de Google Docs como la ruta para crear y buscar documentos.

Puede agregar / eliminar hojas de trabajo dentro de la hoja de cálculo utilizando los feeds basados en la hoja de trabajo .

La actualización de una hoja de cálculo se realiza mediante feeds basados ​​en listas o feeds basados ​​en celdas .

La lectura de la hoja de cálculo se puede realizar a través de las API de hojas de cálculo de Google mencionadas anteriormente o, solo para las hojas publicadas , utilizando el lenguaje de consulta de la API de visualización de Google para consultar los datos (que pueden devolver resultados en formato de tabla CSV, JSON o HTML).


Olvídese de jQuery. jQuery solo es realmente valioso si está atravesando el DOM. Dado que GAS (Google Apps Scripting) no usa DOM, jQuery no agregará valor a su código. Quédate con la vainilla.

Estoy realmente sorprendido de que nadie haya proporcionado esta información en una respuesta todavía. No sólo puede se puede hacer, pero es relativamente fácil de hacer uso de la vainilla JS. La única excepción es la API de visualización de Google, que es relativamente nueva (a partir de 2011). La API de visualización también funciona exclusivamente a través de un URI de cadena de consulta HTTP.


13

Existe una solución que no requiere que uno publique la hoja de cálculo. Sin embargo, la hoja debe estar "Compartida". Más específicamente, es necesario compartir la hoja de manera que cualquiera que tenga el enlace pueda acceder a la hoja de cálculo. Una vez hecho esto, se puede utilizar la API HTTP de Google Sheets.

Primero, necesitas una clave API de Google. Dirígete aquí: https://developers.google.com/places/web-service/get-api-key NB. Tenga en cuenta las ramificaciones de seguridad de tener una clave de API disponible para el público: https://support.google.com/googleapi/answer/6310037

Obtenga todos los datos para una hoja de cálculo; advertencia, esto puede ser una gran cantidad de datos.

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

Obtener metadatos de la hoja

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

Obtenga un rango de celdas

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

Ahora armado con esta información, uno puede usar AJAX para recuperar datos y luego manipularlos en JavaScript. Recomendaría 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);                                                                                                                                                       
  });                

¿Qué son los datos de la red?
William Entriken

@WilliamEntriken El contenido de las celdas.
robsco

11

Actualización de 2016 : la forma más sencilla es utilizar la API de Google Apps Script, en particular el servicio SpreadSheet . Esto funciona para hojas privadas, a diferencia de las otras respuestas que requieren la publicación de la hoja de cálculo.

Esto le permitirá vincular el código JavaScript a una hoja de Google y ejecutarlo cuando se abra la hoja o cuando se seleccione un elemento del menú (que puede definir).

Aquí hay una demostración / inicio rápido . El código se ve así:

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

También puede publicar scripts como aplicaciones web .


6

editar: Esto se respondió antes de que se lanzara la API de Google Doc. Ver la respuesta de Evan solla y la respuesta de Dan Dascalescu para obtener más información actualizada.

Parece que puedes, pero es difícil de usar. Implica el uso de la API de datos de Google.

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

"La biblioteca cliente de JavaScript tiene métodos auxiliares para Calendar, Contactos, Blogger y Google Finance. Sin embargo, puede usarla con casi cualquier API de datos de Google para acceder a feeds autenticados / privados. Este ejemplo usa la API DocList".

y un ejemplo de cómo escribir un gadget que interactúe con hojas de cálculo: http://code.google.com/apis/spreadsheets/gadgets/


¿Por qué lo llamas "dolor"? ¿Qué daño hace hacerlo?
Pratik

1
Es una molestia porque no tiene una API nativa, lo que significa que usted mismo debe realizar una gran cantidad de análisis y manipulación de datos. una api de hoja de cálculo nativa se las proporcionaría.
Ape-inago

4

'JavaScript acceder a Google Docs' sería tedioso de implementar y, además, la documentación de Google tampoco es tan fácil de obtener. Tengo algunos buenos enlaces para compartir mediante los cuales puede lograr acceso js a 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

Puede que estos te ayuden ...


8
el enlace 1 quedará obsoleto El 20 de abril de 2015, error 404 del enlace 2 , enlace 3 v2.0 obsoleto, enlace 4 obsoleto
vladkras

2

Lo siento, esta es una pésima respuesta. Aparentemente, esto ha sido un problema durante casi dos años, así que no contenga la respiración.

Aquí está la solicitud oficial de que puede "destacar"

Probablemente, lo más cerca que puede llegar es desarrollar su propio servicio con Google App Engine / Python y exponer cualquier subconjunto que necesite con su propia biblioteca JS. Aunque me encantaría tener una mejor solución para mí.





1

Puede leer los datos de las hojas de cálculo de Google Sheets en JavaScript mediante el conector de hojas de RGraph:

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

Inicialmente (hace unos años) esto dependía de algunas funciones de RGraph para hacer su magia, pero ahora puede funcionar de forma independiente (es decir, no requiere la biblioteca común de RGraph).

Algún código de ejemplo (este ejemplo crea un 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>

Y ahora hay una versión PHP de la utilidad de importación - disponible en la misma URL
Richard

0

Estoy construyendo Stein para ayudarte a hacer precisamente eso. También proporciona una solución solo HTML, en caso de que desee mostrar datos directamente desde la hoja. Compruébelo en steinhq.com .

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.