Agrega el botón "Guardar en Drive"

El botón "Guardar en Drive" permite a los usuarios guardar archivos en Drive desde tu sitio web. Por ejemplo, supongamos que tu sitio web contiene varios manuales de instrucciones (PDF) que los usuarios pueden descargar. El botón "Guardar en Drive" se puede colocar junto a cada manual para que los usuarios los guarden en Mi unidad.

Cuando el usuario hace clic en el botón, el archivo se descarga de la fuente de datos y se sube a Google Drive a medida que se reciben los datos. Debido a que la descarga se realiza en el contexto del navegador del usuario, este proceso le permite al usuario autenticar la acción para guardar archivos con la sesión establecida del navegador.

Navegadores admitidos

El botón "Guardar en Drive" es compatible con estos navegadores.

Agrega el botón “Guardar en Drive” a una página

Para crear una instancia del botón “Guardar en Drive”, agrega la siguiente secuencia de comandos a tu página web:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
   data-src="//example.com/path/to/myfile.pdf"
   data-filename="My Statement.pdf"
   data-sitename="My Company Name">
</div>

Donde:

  • class es un parámetro obligatorio que se debe configurar como g-savetodrive si usas una etiqueta HTML estándar.

  • data-src es un parámetro obligatorio que contiene la URL del archivo que se guardará.

    • Las URLs pueden ser absoluta o relativa.
    • La URL data-src se puede entregar desde el mismo dominio, subdominio y protocolo que el dominio en el que se aloja el botón. Debes usar protocolos de coincidencia entre la página y la fuente de datos.
    • No se admiten los URI de datos ni las URLs de file://.
    • Debido a la misma política de origen del navegador, esta URL debe entregarse desde el mismo dominio que la página en la que se ubica o se debe poder acceder a ella mediante el uso compartido de recursos entre dominios (CORS). Si el botón y el recurso están en dominios diferentes, consulta Administra los botones y recursos en diferentes dominios.(#domain).
    • Para entregar el archivo cuando se entrega la misma página mediante HTTP y HTTPS, especifica el recurso sin un protocolo, como data-src="//example.com/files/file.pdf", que usa el protocolo apropiado según la forma en que se accedió a la página de hosting.
  • data-filename es un parámetro obligatorio que contiene el nombre que se usó para el archivo de guardado.

  • data-sitename es un parámetro obligatorio que contiene el nombre del sitio web que proporciona el archivo.

Puedes colocar estos atributos en cualquier elemento HTML. Sin embargo, los elementos más usados son div, span o button. Cada uno de estos elementos se muestra de forma un poco diferente mientras se carga la página, ya que el navegador lo renderiza antes de que JavaScript "Guardar en Drive" vuelva a renderizarlo.

Esta secuencia de comandos se debe cargar con el protocolo HTTPS y se puede incluir desde cualquier punto de la página sin restricciones. También puedes cargar la secuencia de comandos de forma asíncrona para mejorar el rendimiento.

Cómo usar varios botones en una página

Puedes colocar varios botones de “Guardar en Drive” en la misma página. Por ejemplo, es posible que tengas un botón en la parte superior e inferior de una página larga.

Si los parámetros data-src y data-filename son iguales para varios botones, guardar desde un botón hará que todos los botones similares muestren la misma información de progreso. Si se hace clic en varios botones diferentes, estos se guardan de forma secuencial.

Cómo controlar botones y recursos en diferentes dominios

Si el botón “Guardar en Drive” está en una página independiente de la fuente de datos, la solicitud para guardar el archivo debe usar el Uso compartido de recursos multiorigen (CORS) para acceder al recurso. CORS es un mecanismo que permite que una aplicación web de un dominio acceda a los recursos de un servidor en otro dominio.

Por ejemplo, si se coloca el botón "Guardar en Drive" en una página en http://example.com/page.html y la fuente de datos se especifica como data-src="https://otherserver.com/files/file.pdf", el botón no podrá acceder al PDF, a menos que el navegador pueda usar CORS para acceder al recurso.

La URL data-src se puede entregar desde otro dominio, pero las respuestas del servidor HTTP deben admitir solicitudes HTTP OPTION y también incluir los siguientes encabezados HTTP especiales:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range

Access-Control-Allow-Origin puede tener el valor * para permitir CORS desde cualquier dominio o, de forma alternativa, puede especificar los dominios que tienen acceso al recurso a través de CORS, como http://example.com/page.html. Si no tienes un servidor para alojar tu contenido, considera usar Google App Engine.

Para obtener más información, consulta la documentación de tu servidor sobre cómo habilitar CORS desde el origen que entrega el botón “Guardar en Drive”. Si quieres obtener más información sobre cómo habilitar tu servidor para CORS, consulta Quiero agregar compatibilidad con CORS a mi servidor.

API de JavaScript

El botón de JavaScript "Guardar en Drive" define dos funciones de renderización de botones en el espacio de nombres gapi.savetodrive. Si inhabilitas el procesamiento automático, debes llamar a una de estas funciones mediante la configuración de parsetags en explicit.

Método Descripción
gapi.savetodrive.render(
container,
parameters
)
Renderiza el contenedor especificado como un widget del botón "Guardar en Drive".
contenedor
El contenedor que se renderizará como el botón “Guardar en Drive”. Especifica el ID del contenedor (string) o el elemento DOM en sí.
Parámetros
Un objeto que contiene los atributos de etiqueta "Guardar en Drive" como pares clave=valor, sin los prefijos data-. Por ejemplo, {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go(
opt_container
)
Renderiza todas las etiquetas y clases “Guardar en Drive” en el contenedor especificado. Esta función solo debe usarse si parsetags está configurado como explicit, lo que puedes hacer por motivos de rendimiento.
opt_container
El contenedor que contiene las etiquetas del botón “Guardar en Drive” que se renderizarán. Especifica el ID del contenedor (string) o el elemento del DOM. Si se omite el parámetro opt_container, se renderizan todas las etiquetas "Guardar en Drive" de la página.

Ejemplo de JavaScript "Guardar en Drive" con carga explícita

<!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Load</title>
        <link rel="canonical" href="http://www.example.com">
        <script src="https://apis.google.com/js/platform.js" async defer>
          {parsetags: 'explicit'}
        </script>
      </head>
      <body>
        <div id="container">
          <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
          <div>
        </div>
        <script type="text/javascript">
          gapi.savetodrive.go('container');
        </script>
      </body>
    </html>

Ejemplo de JavaScript "Guardar en Drive" con renderización explícita

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Explicit Render</title>
        <link rel="canonical" href="http://www.example.com">
        <script>
          window.___gcfg = {
            parsetags: 'explicit'
          };
        </script>
        <script src="https://apis.google.com/js/platform.js" async defer></script>
      </head>
      <body>
        <a href="javascript:void(0)" id="render-link">Render the Save to Drive button</a>
        <div id="savetodrive-div"></div>
        <script>
          function renderSaveToDrive() {
            gapi.savetodrive.render('savetodrive-div', {
              src: '//example.com/path/to/myfile.pdf',
              filename: 'My Statement.pdf',
              sitename: 'My Company Name'
            });
          }
          document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
        </script>
      </body>
    </html>

Localizar el botón "Guardar en Drive"

Si tu página web admite un idioma específico, establece la variable window.___gcfg.lang en ese idioma. Si no la estableces, se usará el idioma de Google Drive del usuario.

Para conocer los valores de código de idioma disponibles, consulta la lista de códigos de idioma admitidos.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Save to Drive Demo: Async Load with Language</title>
        <link rel="canonical" href="http://www.example.com">
      </head>
      <body>
        <div class="g-savetodrive"
             data-src="//example.com/path/to/myfile.pdf"
             data-filename="My Statement.pdf"
             data-sitename="My Company Name">
        </div>

        <script type="text/javascript">
          window.___gcfg = {
            lang: 'en-US'
          };
        </script>
        <script src = 'https://apis.google.com/js/platform.js' async defer></script>

      </body>
    </html>

Solución de problemas

Si recibes un error de XHR cuando descargas tu URL data-src, verifica que el recurso exista y que no tengas un problema de CORS.

Si se truncan los archivos grandes a 2 MB, es probable que el servidor no esté expuesto a Content-Range, lo que probablemente sea un problema de CORS.