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 enumera varios manuales de instrucciones (PDF) que los usuarios pueden descargar. El botón "Guardar en Drive" se puede colocar junto a cada manual, lo que permite a los usuarios guardarlos en Mi unidad.

Cuando el usuario hace clic en el botón, el archivo se descarga de la fuente de datos y se carga 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 autenticar la acción para guardar archivos con su sesión de navegador establecida.

Navegadores compatibles

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>

Aquí:

• class es un parámetro obligatorio que se debe establecer en 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 absolutas o relativas.
  • La URL de 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 coincidentes entre la página y la fuente de datos.
  • No se admiten los URI de datos ni las URLs de file://.
  • Debido a la política del mismo origen del navegador, esta URL debe entregarse desde el mismo dominio que la página en la que se encuentra, o bien 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 Cómo controlar botones y recursos en diferentes dominios.(#domain).
  • Para entregar el archivo cuando la misma página se entrega a través de 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 usa para el archivo 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 ligeramente diferente mientras se carga la página porque el navegador renderiza el elemento antes de que la función "Guardar en Drive" de JavaScript vuelva a renderizarlo.

Esta secuencia de comandos debe cargarse mediante el protocolo HTTPS y puede incluirse 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.

Nota: El botón se renderiza intercalado. El botón "Guardar en Drive" se puede unir a otro elemento para que el diseño inicial se vea similar al diseño final.

Nota: Si el usuario sale de la página antes de que se complete la descarga, se descartarán los datos y no se creará ningún archivo en Google Drive.

Usa varios botones en una página

Puedes colocar varios botones "Guardar en Drive" en la misma página. Por ejemplo, puedes tener un botón en la parte superior y en la parte inferior de una página larga.

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

Controla botones y recursos en diferentes dominios

Si el botón "Guardar en Drive" está en una página diferente 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 en un dominio acceda a los recursos de un servidor en un dominio diferente.

Por ejemplo, si se coloca un botón "Guardar en Drive" en una página en http://example.com/page.html y se especifica la fuente de datos 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, además, 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, como alternativa, 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". Para 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 código JavaScript del botón "Guardar en Drive" define dos funciones de renderización de botones en el espacio de nombres gapi.savetodrive. Si inhabilitas la renderización automática, debes llamar a una de estas funciones configurando parsetags como explicit.

Método	Descripción
gapi.savetodrive.render( container, parameters )	Renderiza el contenedor especificado como un widget de botón "Guardar en Drive". contenedor Es el contenedor que se renderizará como el botón “Guardar en Drive”. Especifica el ID del contenedor (cadena) o el elemento DOM mismo. Parámetros Un objeto que contiene 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 de "Guardar en Drive" en el contenedor especificado. Esta función solo debe usarse si parsetags se establece como explicit, lo que puedes hacer por motivos de rendimiento. opt_container Es el contenedor que contiene las etiquetas del botón “Guardar en Drive” para renderizar. Especifica el ID del contenedor (cadena) o el elemento DOM mismo. 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>

Busca 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 se establece, se usa el idioma de Google Drive del usuario.

Para conocer los valores de códigos 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 XHR cuando descargas tu URL de data-src, verifica que el recurso realmente exista y que no tengas un problema de CORS.

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