Adicione o botão "Salvar no Google Drive"

O botão "Salvar no Google Drive" permite que os usuários salvem arquivos do seu site no Google Drive. 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, é feito o download do arquivo da fonte de dados e o upload dele 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 o usuário autentique a ação para salvar arquivos usando a sessão do navegador estabelecida.

Navegadores compatíveis

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

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

Para criar uma instância do botão "Salvar no Google 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 exibido no mesmo domínio, subdomínio e protocolo que o 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 à mesma política de origem do navegador, esse URL precisa ser disponibilizado no mesmo domínio da página em que está colocado ou estar acessível com o Compartilhamento de recursos entre origens (CORS). Se o botão e o recurso estiverem em domínios diferentes, consulte Gerenciar botões e recursos em domínios diferentes (#domain).
  • Para exibir o arquivo quando a mesma página é veiculada por http e https, especifique o recurso sem um protocolo como data-src="//example.com/files/file.pdf", que usa o protocolo apropriado 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 salvo.

• 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 durante o carregamento, porque o navegador renderiza o elemento antes que o JavaScript "Salvar no Drive" renderize novamente.

Esse script precisa ser carregado usando o protocolo HTTPS e pode ser incluído de qualquer ponto da página sem restrições. 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 unido a outro elemento para que o layout inicial pareça com o final.

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

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

Você pode colocar vários botões "Salvar no Google Drive" na mesma página. Por exemplo, é possível ter um botão na parte superior e na parte inferior de uma página longa.

Se os parâmetros data-src e data-filename forem os mesmos para vários botões, salvar usando um único botão fará com que todos os botões semelhantes mostrem as mesmas informações de progresso. Se você clicar em vários botões diferentes, eles serão salvos em sequência.

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 estiver 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 disponibilizado a partir de outro domínio, mas as respostas do servidor HTTP precisam oferecer suporte a solicitações de OPÇÕES HTTP 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, como alternativa, especificar os domínios que têm acesso ao recurso por meio de CORS, como http://example.com/page.html. Se você não tiver um servidor para hospedar o conteúdo, considere usar o Google App Engine.

Para mais informações, consulte a documentação do servidor sobre como ativar o CORS usando a origem que veicula o botão "Salvar no Google 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ão no namespace gapi.savetodrive. Se você desativar a renderização automática, precisará 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 do botão "Salvar no Google Drive". contêiner O contêiner a ser renderizado como o botão "Salvar no Google 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 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. Use essa função apenas se parsetags estiver definido como explicit, o que pode ser feito para melhorar o desempenho. opt_container O contêiner com 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 Google 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 Google 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 ela não for definida, o idioma do Google Drive do usuário será usado.

Para saber 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 não há um problema de CORS.

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