Como criar um link para download usando HTML5

Download usando HTML5

Existem várias formas de criamos links ou sistemas de download. No Visual Dicas postamos uma artigo para você criar um sistema de download, leia Como criar um sistema de download no seu Blogger. Entretanto, todas as formas exigem conhecimento de programação e aplicativos de terceiros, mas que podem ser facilitados pelo HTML5.

O HTML5 trouxe muitas facilidades para os desenvolvedores de sites e blogs. Uma delas é possibilitar a criação de links diretos de download, como mostraremos neste artigo.

HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa dois conceitos diferentes: É uma nova versão da linguagem HTML, com novos elementos, atributos, e comportamentos. e um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites mais diversos e poderosos.

Atributo “download”

O atributo “download” especifica um arquivo será baixado quando o usuário clicar em um link HTML.

Sintaxe

<a href=”endereço do arquivo” download> </a>

Onde:

• endereço do arquivo: caminho onde o arquivo está hospedado.

---

Sintaxe com valor opcional

<a href=”endereço do arquivo” download=”nome(opcional)”> </a>

Onde:

• endereço do arquivo: caminho onde o arquivo está hospedado.
• nome (opcional): novo nome dado ao arquivo que será baixado (não funciona na maioria dos navegadores).

---

Notas:

• O atributo “download” só poderá ser utilizado se o atributo “href” estiver definido.
• O valor do atributo será o nome do arquivo baixado.
• Se o valor for omitido, o nome do arquivo original será usado.
• Não há restrições sobre os valores permitidos, entretanto este recurso não funciona em todos navegadores.
• O navegador detectará automaticamente a extensão correta do arquivo (.img, .pdf, .txt, .doc, etc.).
• O atributo “download” não é suportado na versão Edge 12, Opera 12 (e versões anteriores) e todas versões do IE e Safari.

Exemplos

Nos exemplos a seguir poderemos baixar arquivos que estão hospedados no Google Sites. (No Visual Dicas mostramos como hospedar arquivos gratuitamente - Usando o Google Sites como servidor de arquivos para blogs e sites):

Exemplo arquivo Word
< a href="https://sites.google.com/site/servidorvisualdicas/arquivos-word/Online OCR - PDF.docx" download>Baixar arquivo Word</a>

Exemplo arquivo Excel
< a href="https://sites.google.com/site/servidorvisualdicas/arquivos-excel/Data_validade.xlsx" download>Baixar arquivo Excel</a>

Exemplo arquivo MP3
< a href="https://sites.google.com/site/servidorvisualdicas/arquivos-musicas/SinfoniaNo9Beethoven.mp3" download>Baixar arquivo MP3</a>

Exemplo arquivo PDF
< a href="https://sites.google.com/site/servidorvisualdicas/arquivos-pdf/Texto PDF.pdf" download>Baixar arquivo PDF</a>

Teste os códigos:

Exemplo arquivo Word

Baixar arquivo Word

Exemplo arquivo Excel

Baixar arquivo Excel

Exemplo arquivo MP3

Baixar arquivo MP3

Exemplo arquivo PDF

Baixar arquivo PDF clique aqui

Neste outro exemplo vamos utilizar uma imagem com link:

Exemplo imagem como link
< a href=https://www.visualdicas.com.br/musicas/sinfoniaNo5Beethoven.mp3 download><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBGq6UawGqnOi7trcHX6mh1VW-EH2-tIMwXBc0mZ3xV5_un-zEMrQwnAPMZP66VWS0IOTJ11hesAYscoZ3iY8WTqPlktkke5vLBwnRq9EcATwHgcX0T6kqqgNum8IRmRE2cNcplhMuvk-L/?imgmax=800"</a>

Teste o código abaixo:

Clique na imagem abaixo

Para simular nossos código, abra o Squids Editor: Tente você mesmo »

Obs.: Você também poderá colocar botões nos seus links para download. Leia Crie botões personalizados para o seu Blogger.

byALF