HTML5 Download Attribute | Como usar o atributo de [download] | Série HTML5 | SW9
Olá Pessoal. Sejam Bem Vindos ao canal e blog SW9 (http://blog.sw9.com.br) ?
Chegou o momento de retornar para a Série HTML5 e trazer novos conteúdos para a minha audiência. ?
#Quer acompanhar a Série sobre HTML5?
Se você gosta de aprender coisas novas, sempre antenado em tecnologia e tem interesse em conhecer um pouco mais sobre HTML5, não deixe de acompanhar a playlist que mantenho no meu canal do Youtube https://www.youtube.com/playlist?list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
Dentro desta playlist você vai encontrar episódios sobre Drag&Drop, File API, Client Side Storage e muito mais.❤️
#O que você vai aprender hoje?
Você vai aprender a criar links de download usando o novo atributo chamado [download]. Este novo atributo veio para facilitar bastante a vida de quem precisa forçar o download de arquivos a partir de um link/botão existente na página.
#Minha necessidade
Eu estava trabalhando em um projeto, e parte dele era construir uma galeria de imagens que precisava ter o seguinte comportamento: O usuário deve pesquisar por imagens e exibi-las em uma galeria. Até este ponto tudo bem. Porém, o próximo requisito era permitir que o usuário, ao clicar em qualquer imagem, pude-se fazer o download dela.
Aparentemente seria algo trivial, bastaria criar um link para cada imagem e o problema estaria resolvido. No entanto, devido ao comportamento padrão dos navegadores, ao clicar no link o navegador automaticamente abria a imagem na mesma página/aba ?. Mas o comportamento que eu preciso é: ao clicar no link, o download da imagem seja iniciado. Neste momento comecei a pesquisar na Internet e me deparei com três soluções:
1- Forçar este comportamento a partir do Backend;
2- Usar uma biblioteca de Javascript;
3- Usar um atributo chamado [download] que surgiu com o HTML5.
Neste episódio eu vou focar no item 3, e mostrar como é simples e fácil utilizar o atributo de [download]. Para quem tiver interesse em saber um pouco mais sobre a segunda alternativa (uso de biblioteca JS), eu compartilho o link para a biblioteca FileSaver.js [https://github.com/eligrey/FileSaver.js].
#Sobre o atributo de download
Com o surgimento do HTML5, felizmente foi criado um atributo chamado [download]. Este atributo pode fazer parte de algumas tags HTML com o objetivo de sobrepor o comportamento dos navegadores e forçar o download dos arquivos. Geralmente usamos o atributo [download] como parte da tag html [area] ou [a] em conjunto com o atributo [href].
#Usando o atributo de download
Usar o atributo de [download] para criar links que forçam o download de arquivos é algo muito simples e rápido. Você deve incluir o atributo de [download] dentro de uma tag html do tipo [a], por exemplo.
Seria algo assim:
<a href='caminho-da-imagem/logo.png' download>Download</a>
Comportamento esperado:
Quando o usuário clicar no link, o navegador vai forçar o download da imagem mantendo o nome original dela (logo.png).
Agora você sabia que podemos definir um valor para o atributo [download]? Sim, isso mesmo. O código poderia ficar assim:
<a href='caminho-da-imagem/logo.png' download='imagem'>Download</a>
Comportamento esperado:
O navegador vai forçar o download da imagem e atribuir o nome definido no atributo de [download], portanto a imagem salva receberá o nome imagem.png
#Você Sabia?
Agora que você aprendeu a usar o atributo [download] e até mesmo definir o nome do arquivo que será baixado, o que dizer da extensão dos arquivos?
O navegador identifica automaticamente a extensão do arquivo que está sendo baixado Portanto, quando você quiser usar o atributo de download e ao mesmo tempo definir um nome específico, não se preocupe em informar a extensão.
Se você tentar criar um código assim:
<a href='caminho-da-imagem/logo.png' download='imagem.png'>Download</a>
O nome do arquivo gerado pelo navegador será: imagem.png.png
#E a compatibilidade?
Agora você pode me perguntar: E quanto a compatibilidade? Eu posso usar esse atributo nos meus projetos sem me preocupar com a compatibilidade entre os navegadores?
Para responder a pergunta, vou precisar apelar para o serviço Can I Use. Já cheguei a falar um pouco desse serviço em posts anteriores. A partir do Can I Use é possível verificar a compatibilidade de uma série de recursos entre os diversos navegadores.
Fazendo uma pesquisa pelo termo [download], o resultado foi de mais de 80% de compatibilidade. Salvo algumas exceções, você pode adotar cada vez mais o uso deste atributo em seus projetos.
Se precisar de mais detalhes, você pode clicar diretamente no link a seguir: https://caniuse.com/#search=download
Falando um pouco sobre as exceções, novamente temos problemas com o Internet Explorer. Nenhuma das versões apresenta compatibilidade.
Com relação ao Chrome e Firefox, o correto funcionamento do atributo [download] está restrito a arquivos que estejam na mesma origem da página que contém o link de download [same-origin].
O termo mesma origem (same-origin) é um importante conceito no modelo de segurança de aplicações web. O que ele realmente significa? Quando existe uma imposição do tipo ‘same-origin’, o navegador permite que uma determinada página acesse o recurso de outra página, somente se ambas as páginas estiverem na mesma origem, ou seja, respondendo pelo mesmo protocolo (http, https), nome de host (hostname) e porta port).
A seguir eu comento um pouco mais sobre 3 testes que faremos na aula em vídeo.
#Atributo download Vs Mesma Origem
Para testarmos o funcionamento do atributo de download, vamos primeiro obedecer a regra dos navegadores Google Chrome e Firefox, que condicionam o correto funcionamento do atributo à política ‘same-origin’.
Vamos criar um link combinando os atributos href e download, garantindo que a imagem referenciada pelo atributo href esteja disponível no mesma origem da página que contém este link.
Qual o comportamento esperado?
Quando o usuário clicar no link, o download da imagem será iniciado.
#Atributo download Vs Origem Diferente
Por outro lado, se não obedecermos a regra de ‘same-origin’ e tentarmos criar um link apontando para uma imagem hospedada em outra origem, qual será o resultado?
Neste caso, quando o usuário clicar no link, a imagem será carregada no próprio navegador, sobrepondo a página que já estava carregada. ?
#Navegadores não compatíveis [Solução de contorno]
Se você seguir a regra imposta pelo Chrome e Firefox tudo está resolvido? Eu diria que grande parte dos seus clientes vão conseguir observar o comportamento adequado do link de download. Porém, aqueles que usam Internet Explorer ou, se por acaso, você precisa buscar recursos de outra origem, vamos precisar bolar uma alternativa.
Sabendo que nestas condições o navegador vai carregar a imagem na própria página onde havia o link, este comportamento além de não ser elegante, vai trazer confusão para o usuário.
Tudo bem, e como pensar em uma forma um pouco mais elegante?
Bom, uma alternativa seria combinar o atributo href com o atributo target. Neste modelo, podemos definir o atributo target com o valor _blank e assim a imagem seria aberta em outra página, mantendo a página original intacta. Não é lá aquelas coisas mas já ajuda. ?
Ficaria assim:
<a href='caminho-da-imagem/logo.png' download='imagem' target='_blank'>Download</a>
Deste forma, se o navegador for compatível ele vai usar automaticamente o atributo [download], caso contrário vai usar o atributo [target].
#Hora de assistir ao vídeo
Chegou o momento de arregaçar as mangas e colocar a mão na massa. ?? ??♂️ ?♀️
[Conclusão]
No episódio de hoje [HTML5 Download Attribute | Como usar o atributo de [download] |Série HTML5 | SW9], você aprendeu a criar links que forçam o download de arquivos usando o atributo download. ?
Está disponível na área de downloads o projeto que construímos hoje. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.
Dentro da minha área de Downloads, procure pela pasta /HTML5/Novos Atributos. O resto é com vocês 
Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
[Links úteis]
Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph
Link do vídeo: https://youtu.be/QfXUEYnARdI
PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: https://youtube.com/+sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário