Adicione o botão "Salvar no Google Drive"

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

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

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 do mesmo domínio, subdomínio e protocolo do domínio em que o botão está hospedado. Use 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 é 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 veicular o arquivo quando a mesma página for veiculada 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 em 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á carregando, porque o navegador renderiza o elemento antes que o JavaScript "Salvar no Drive" faça uma nova renderização.

O script precisa ser carregado usando o protocolo HTTPS e pode ser incluído em qualquer ponto da página sem restrição. Você também pode 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 fique parecido com o final.

Observação: se o usuário sair da página antes da conclusão do download, 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, salvar 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 diferentes domínios

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 acesse 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 acessar o PDF, a menos que o navegador possa usar o CORS para acessar o recurso.

O URL data-src pode ser veiculado 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

Access-Control-Allow-Origin pode ter o valor * para permitir o CORS de qualquer domínio ou especificar os domínios que têm acesso ao recurso via 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 veicula o botão "Salvar no Drive". Para mais informações sobre como ativar o CORS no seu servidor, consulte Quero adicionar suporte ao CORS no 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, defina parsetags como explicit para chamar uma destas funções.

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 "Salvar no Drive" como pares 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 estiver definida 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" para renderizar. 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>

Localizar o botão "Salvar no Drive"

Se a página da Web for compatível com 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 ver 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 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 expondo o Content-Range, provavelmente um problema de CORS.