Agrega el botón "Guardar en Drive"

El botón "Guardar en Drive" permite que los usuarios guarden archivos en Drive desde tu sitio web. Por ejemplo, supongamos que tu sitio web muestra varios manuales de instrucciones (PDFs) 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. 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>

Donde:

  • 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 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 URIs de datos ni las URLs file://.
    • Debido a la política del mismo origen del navegador, esta URL se debe entregar desde el mismo dominio que la página en la que se coloca 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 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 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 que se usan con más 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 "Guardar en Drive" vuelva a renderizarlo.

La 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.

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 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.

Controla botones y recursos en diferentes dominios

Si tu botón "Guardar en Drive" está en una página separada de la fuente de datos, la solicitud para guardar el archivo debe usar el uso compartido de recursos entre dominios (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 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 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 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 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
El contenedor que se renderizará como el botón "Guardar en Drive". Especifica el ID del contenedor (string) 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 "Guardar en Drive" en el contenedor especificado. Esta función solo se debe usar si parsetags se establece a 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 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>

Localiza 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 obtener 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 la URL 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.