Usando o atributo de download do HTML5

<

div data-content-block-type=”Wysi” id=”ipuw”>

Se você tiver acesso do lado do servidor ao seu site, existem algumas soluções alternativas que você pode usar, como configurar o .htaccess, para baixar esses arquivos diretamente. Se o seu site estiver hospedado em um serviço gratuito como WordPress.com, Blogspot ou talvez páginas do Github que não permitem isso, considere usar o download atributo.

Usando o atributo de download do HTML5

O download atributo faz parte da especificação HTML5 e expressa um link como download link em vez de um de navegação link.

Sintaxe

1

 href="download/acme-doc.txt" download>Download Text

O download O atributo permite que você renomeie opcionalmente o nome do arquivo durante o download. Quando o arquivo reside no servidor, especialmente se for gerado automaticamente, isso pode ser ideal para fornecer aos usuários um arquivo com um nome mais sensato quando baixado, talvez como: Acme Documentation (ver. 2.0.1).txt (sem esquecer a extensão do arquivo).

Veja como isso ficaria na prática:

1

 href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text

Experimente na página de demonstração e você deve encontrar o arquivo baixado com o nome especificado no download atributo.

Algumas notas:

• O Firefox permite apenas que os usuários baixem arquivos da mesma origem devido a uma questão de segurança. O arquivo deve vir do seu próprio servidor ou nome de domínio, caso contrário será aberto no navegador.
• Embora o download de arquivos de origem cruzada seja permitido no Chrome e no Opera mais recente (com Chromium/Blink), ambos ignorarão o atributo valor. Em outras palavras, o nome do arquivo permanecerá inalterado.

Fornecendo fallback para o Internet Explorer

O download O atributo não foi implementado no Internet Explorer, embora seja suportado pelo Edge.

Para tornar as coisas à prova de balas, podemos adicionar um substituto decente, como fornecer instruções extras abaixo do link de download para navegadores não compatíveis. Para isso, precisaremos baixar o Modernizr com o download teste de recurso incluído.

Então podemos adicionar o seguinte script.

1

if ( ! Modernizr.adownload ) {

2

    var $link = $('a');

3

4

    $link.each(function() {

5

        var $download = $(this).attr('download');

6

7

        if (typeof $download !== typeof undefined && $download !== false) {

8

      var $el = $('
').addClass('download-instruction').text('Right-click and select "Download Linked File"');

9

      $el.insertAfter($(this));

10

        }

11

12

    });

13

}

O script testará se o navegador suporta o download atributo; caso contrário, ele adicionará um novo

com a classe para fins de estilo, bem como o texto de instrução, e insira-o imediatamente abaixo de qualquer link que tenha sido fornecido com o download atributo.

Conclusão

O HTML5 download O atributo torna o manuseio de links de download muito conveniente para quem não tem acesso à configuração do lado do servidor.

Saiba mais HTML

Posted by admin