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 incluye varios manuales de instrucciones (en formato PDF) que los usuarios pueden descargar. El botón "Guardar en Drive" se puede colocar junto a cada manual para que los usuarios puedan guardarlos en su carpeta 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. Dado 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>

Donde:

• class es un parámetro obligatorio que debe establecerse 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 publicar 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 URIs de datos ni las URLs de file://.
  • Debido a la política de mismo origen del navegador, esta URL debe publicarse desde el mismo dominio que la página en la que se coloca o debe ser accesible a través del uso compartido de recursos entre dominios (CORS). Si el botón y el recurso se encuentran 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 adecuado según cómo 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 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 que se usan con mayor frecuencia son div, span o button. Cada uno de estos elementos se muestra de manera ligeramente diferente mientras se carga la página, ya que el navegador renderiza el elemento antes de que el JavaScript de "Guardar en Drive" vuelva a renderizarlo.

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

Nota: El botón se renderiza en línea. El botón "Guardar en Drive" se puede incluir en otro elemento para que el diseño inicial se parezca al diseño final.

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

Usar 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 otro en la parte inferior de una página larga.

Si los parámetros data-src y data-filename son los mismos para varios botones, guardar 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.

Cómo controlar botones y recursos en diferentes dominios

Si el botón "Guardar en Drive" se encuentra en una página separada 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 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 de data-src se puede entregar desde otro dominio, pero las respuestas del servidor HTTP deben admitir solicitudes HTTP OPTION y deben 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 el CORS desde cualquier dominio o, de manera 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 del servidor sobre cómo habilitar CORS desde el origen que entrega tu 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 botón "Guardar en Drive" de JavaScript 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 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 la 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 se debe usar si parsetags se establece en explicit, lo que puedes hacer por motivos de rendimiento. opt_container Contenedor que incluye las etiquetas del botón "Guardar en Drive" que se renderizarán. Especifica el ID del contenedor (cadena) o el elemento DOM mismo. Si se omite el parámetro opt_container, se renderizarán todas las etiquetas "Guardar en Drive" de la página.

Ejemplo de JavaScript de "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 de "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>

Localiza el botón "Guardar en Drive"

Si tu página web admite un idioma específico, configura la variable window.___gcfg.lang en ese idioma. Si no se configura, 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 de 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 exponga Content-Range, lo que probablemente sea un problema de CORS.