Neste artigo vamos mostrar como criar links de download utilizando apenas o atributo download do HTML5. Veremos como é simples fazer sistemas de download com HTML sem precisar de códigos mirabolantes em linguagens de programação específicas.

Atenção: O navegador Firefox e o Chrome apenas habilita o download de arquivos da mesma origem (same-origin) devido a questões de segurança. O arquivo portanto, deve ser encaminhado do seu próprio servidor ou domínio, caso contrário, o arquivo será executado diretamente no navegador. Desta forma, independente do navegador operado pelo usuário, é recomendado que sempre utilize arquivos para download da mesma origem entre o site que contém o link de download e o servidor onde está armazenado o arquivo.

1. Criando um link com o atributo de download do HTML

1.1. O atributo download especifica que o um arquivo será baixado quando um usuário clicar no hiperlink.

1.1.1. O atributo download é usado apenas se o atributo href do elemento <a>link</a> estiver definido.

1.1.2. Não há restrições quanto aos tipos de arquivos permitidos para o download (.img, .pdf, .txt, .html, .exe, etc.).

1.1.3. A forma como o arquivo é baixado dependerá das configurações do navegador do usuário. Se configurado para abrir direto no navegador, assim será, caso contrário o download será realizado.

1.1.4. O download só funcionará para endereços relativos (arquivos remotos). Se inserir um URL de um endereço absoluto de um site externo, o download não funcionará e o arquivo será executado diretamente no navegador. Isto acontece porque o arquivo a ser baixado deve ter a mesma origem que o site onde está o link, como já mencionamos antes.

1.1.4.1. Observe no nosso exemplo abaixo que utilizamos o link relativo: /images/visualdicas_logo.png

1.1.4.2. Um link ou endereço absoluto informa a localização completa do arquivo de forma independente da página atual. Para isto, é preciso adicionar o protocolo + domínio + caminho do arquivo. No caso do nosso exemplo o link absoluto seria: https://visualdicas.com.br/visualdicas_logo.png

1.2. Veja no exemplo abaixo onde criamos um link para o download de um arquivo de imagem (logotipo do Visual Dicas):

HTML

<a href="/images/visualdicas_logo.png" download>Clique aqui </a>

Teste o link abaixo a seguir para baixar o logo do Visual Dicas: Clique aqui para baixar o logo do Visual Dicas

2. Alterando o nome do arquivo a ser baixado

2.1. Especificando um valor para o atributo de download, alteramos o nome do arquivo baixado

2.1.1. Não é necessário especificarmos a extensão do novo nome do arquivo, pois o navegador detectará a extensão correta do arquivo. Veja o exemplo a seguir

HTML

<a href="/images/visualdicas_logo.png" download="teste_visualdicas">Clique aqui </a>

Teste o link abaixo a seguir para baixar o logo do Visual Dicas: Clique aqui para baixar o logo do Visual Dicas

Obs.: Veja na imagem abaixo que o nome do arquivo foi alterado e a extensão (tipo do arquivo) foi detectada no navegador Firefox.

Dica: Coloque o link no formato de um botão, veja alguns exemplos: Criando botões com CSS, Botões Outline e Botões de alerta - classes CSS

Documentação Oficial

1. [Elemento <a> - âncora] » MDN Web Docs - Mozilla

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários