() translation by (you can also view the original English article)
Criar um link utilizando HTML é super fácil; basta adicionar uma tag âncora e apontar um endereço para o atributo href. Porém, alguns tipos de arquivos (como imagens, .pdf, .txt e .doc por exemplo) não podem ser baixados. Ao invés disso, esses tipos de arquivos são baixados no navegador.
Se você tem acesso ao servidor do seu website, existe alguns truques para contornar a situação, como configurar o .htaccess para baixar esses arquivos diretamente. Se o seu site é hospedado em um serviço grátis como o WordPress.com, Blogspot ou GitHug pages, que não permite alterações de configuração do servidor, utilize o atributo download.
Utilizando o atributo "Download"
O atributo download faz parte das especificações do HTML5 e expressa um link como um link de download ao invés de um link para navegação.
O atributo download também permite que você renomeie o nome do arquivo antes de efetuar o download. Quando o arquivo está hospedado no servidor, especificamente se foi gerado automaticamente, ele pode ser nomeado pelo sistema com números e traços, como por exemplo: acme-doc-2.0.1.txt. É muito melhor permitir que o usuário baixe o arquivo com o nome que lhe agradar, ao invés de: Acme Documentatio (ver. 2.0.1).txt.
Exemplo na prática:
1 |
<a href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text</a> |
De uma olhada no demo de exemplo, e você deve se deparar com o arquivo baixado com o nome especificado no atributo download.
Notas:
- O navegador Firefox apenas habilita o download de arquivos da mesma origem devido a uma questão de segurança. O arquivo deve ser encaminhado do seu próprio servidor ou domínio, caso contrário ele deve ser executado no navegador.
- Apesar do Chrome e a ultima versão do Opera (com Chromium/Blink) permitirem o download de arquivos, eles ignoram o atributo de valor. Em outras palavras, o nome do arquivo vai continuar o mesmo.
Criando um fallback
Enquanto redigia o artigo, o atributo download ainda não estava integrado ao Safari e Internet Explorer (como ja era de se esperar). Mesmo assim, de acordo com o modern IE status, ele está no topo de prioridade na lista de desenvolvimento e é bem recebido pela comunidade.
Por enquanto, podemos utilizar um fallback, como fornecer instruções abaixo do link de download para navegadores sem suporte. Para isso, precisamos do Modernizr com o recurso download incluso para teste.
Feito isso, adicionamos 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 = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"'); |
9 |
$el.insertAfter($(this)); |
10 |
}
|
11 |
|
12 |
});
|
13 |
}
|
O script vai testar se o navegador tem suporte ao atributo download. Se não houver suporte, uma <div> é adicionada com uma classe para adicionar a informação de fallback, para baixar clicando com o botão direito, em qualquer link com o atributo download.
Para finalizar
O atributo download torna muito mais simples e conveniente a relação com links de download para qualquer um, com ou sem acesso a configuração do servidor. Acredito que o Internet Explorer e o Safari não demoram muito para impletar o atributo download! Qualquer duvida estou nos comentários!
Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!
