Adicione o botão "Salvar no Google Drive"

O botão "Salvar no Drive" permite que os usuários salvem arquivos no Drive pelo seu site. Por exemplo, suponha que seu site liste vários manuais de instruções (PDFs) que os usuários podem fazer o download. O botão "Salvar no Drive" pode ser colocado ao lado de cada manual, permitindo que os usuários salvem manuais no Meu Drive.

Quando o usuário clica no botão, o arquivo é transferido da fonte de dados e enviado para o Google Drive conforme os dados são recebidos. Como o download é feito no contexto do navegador do usuário, esse processo permite que o usuário autentique a ação para salvar arquivos usando a sessão de navegador estabelecida.

Navegadores compatíveis

O botão "Salvar no Drive" é compatível com estes navegadores.

Adicionar o botão "Salvar no Drive" a uma página

Para criar uma instância do botão "Salvar no Drive", adicione o seguinte script à sua página da 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>

Em que:

• class é um parâmetro obrigatório que precisa ser definido como g-savetodrive se você estiver usando uma tag HTML padrão.

• data-src é um parâmetro obrigatório que contém o URL do arquivo a ser salvo.

  • Os URLs podem ser absolutos ou relativos.
  • O URL data-src pode ser veiculado no mesmo domínio, subdomínio e protocolo do domínio em que o botão está hospedado. É necessário usar protocolos correspondentes entre a página e a fonte de dados.
  • URIs de dados e URLs file:// não são compatíveis.
  • Devido à política de mesma origem do navegador, esse URL precisa ser veiculado no mesmo domínio da página em que ele está colocado ou ser acessível usando o compartilhamento de recursos entre origens (CORS). Se o botão e o recurso estiverem em domínios diferentes, consulte Processar botões e recursos em domínios diferentes.(#domain).
  • Para enviar o arquivo quando a mesma página for enviada por http e https, especifique o recurso sem um protocolo, como data-src="//example.com/files/file.pdf", que usa o protocolo adequado com base na forma como a página de hospedagem foi acessada.

• data-filename é um parâmetro obrigatório que contém o nome usado para o arquivo de salvamento.

• data-sitename é um parâmetro obrigatório que contém o nome do site que fornece o arquivo.

Você pode colocar esses atributos em qualquer elemento HTML. No entanto, os elementos mais usados são div, span ou button. Cada um desses elementos é exibido de maneira um pouco diferente enquanto a página está sendo carregada, porque o navegador renderiza o elemento antes que o JavaScript "Save to Drive" o renderize novamente.

Esse script precisa ser carregado usando o protocolo HTTPS e pode ser incluído em qualquer ponto da página sem restrição. Também é possível carregar o script de forma assíncrona para melhorar o desempenho.

Observação: o botão é renderizado inline. O botão "Salvar no Drive" pode ser envolvido em outro elemento para que o layout inicial se pareça com o layout final.

Observação: se o usuário sair da página antes que o download seja concluído, os dados serão descartados e nenhum arquivo será criado no Google Drive.

Usar vários botões em uma página

É possível colocar vários botões "Salvar no Drive" na mesma página. Por exemplo, você pode ter um botão na parte de cima e na parte de baixo de uma página longa.

Se os parâmetros data-src e data-filename forem iguais para vários botões, o salvamento de um botão fará com que todos os botões semelhantes mostrem as mesmas informações de progresso. Se vários botões diferentes forem clicados, eles serão salvos sequencialmente.

Processar botões e recursos em domínios diferentes

Se o botão "Salvar no Drive" estiver em uma página separada da fonte de dados, a solicitação para salvar o arquivo precisará usar o Compartilhamento de recursos entre origens (CORS) para acessar o recurso. O CORS é um mecanismo que permite que um aplicativo da Web em um domínio acessa recursos de um servidor em um domínio diferente.

Por exemplo, se um botão "Salvar no Drive" for colocado em uma página em http://example.com/page.html e a fonte de dados for especificada como data-src="https://otherserver.com/files/file.pdf", o botão não vai conseguir acessar o PDF, a menos que o navegador possa usar CORS para acessar o recurso.

O URL data-src pode ser enviado de outro domínio, mas as respostas do servidor HTTP precisam oferecer suporte a solicitações HTTP OPTION e incluir os seguintes cabeçalhos HTTP especiais:

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

O Access-Control-Allow-Origin pode ter o valor * para permitir o CORS de qualquer domínio ou, como alternativa, pode especificar os domínios que têm acesso ao recurso por meio do CORS, como http://example.com/page.html. Se você não tiver um servidor para hospedar seu conteúdo, use o Google App Engine.

Para mais informações, consulte a documentação do servidor sobre como ativar o CORS na origem que serve o botão "Salvar no Drive". Para mais informações sobre como ativar o CORS no servidor, consulte Quero adicionar suporte ao CORS ao meu servidor.

JavaScript API

O JavaScript do botão "Salvar no Drive" define duas funções de renderização de botões no namespace gapi.savetodrive. Se você desativar a renderização automática, será necessário chamar uma dessas funções definindo parsetags como explicit.

Método	Descrição
gapi.savetodrive.render( container, parameters )	Renderiza o contêiner especificado como um widget de botão "Salvar no Drive". contêiner O contêiner a ser renderizado como o botão "Salvar no Drive". Especifique o ID do contêiner (string) ou o próprio elemento DOM. parâmetros É um objeto que contém atributos de tag "Save to Drive" como pares de chave=valor, sem os prefixos data-. Exemplo:{"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}
gapi.savetodrive.go( opt_container )	Renderiza todas as tags e classes "Salvar no Drive" no contêiner especificado. Essa função só deve ser usada se parsetags for definido como explicit, o que pode ser feito por motivos de desempenho. opt_container O contêiner que contém as tags do botão "Salvar no Drive" a serem renderizadas. Especifique o ID do contêiner (string) ou o próprio elemento DOM. Se o parâmetro opt_container for omitido, todas as tags "Salvar no Drive" na página serão renderizadas.

Exemplo de JavaScript "Salvar no Drive" com carregamento explícito

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

Exemplo de JavaScript "Salvar no Drive" com renderização 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>

Localize o botão "Salvar no Drive"

Se a página da Web oferecer suporte a um idioma específico, defina a variável window.___gcfg.lang para esse idioma. Se não for definido, o idioma do Google Drive do usuário será usado.

Para conferir os valores de código de idioma disponíveis, consulte a lista de códigos de idioma compatíveis.

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

Solução de problemas

Se você receber um erro XHR ao fazer o download do URL data-src, verifique se o recurso realmente existe e se você não tem um problema de CORS.

Se arquivos grandes forem truncados para 2 MB, é provável que o servidor não esteja exibindo o Content-Range. Provavelmente, é um problema de CORS.