Como criar um link para download

Índice:

Como criar um link para download
Como criar um link para download
Anonim

É interessante como algumas coisas fecham o círculo. Nos primeiros dias da Web, os navegadores baixavam automaticamente links para arquivos que não eram uma página da Web, como imagens, arquivos PDF e documentos. Então, os navegadores se tornaram tão avançados que podiam abrir praticamente qualquer arquivo em tempo real. Isso criou um problema para os desenvolvedores, no entanto. Como você forçaria um navegador a baixar um arquivo, em vez de abri-lo? Um monte de hacks e soluções alternativas surgiram para resolver o problema, mas nenhum era uma solução verdadeira. Tudo isso mudou com o HTML5 quando o Download Attribute foi introduzido.

Agora, os desenvolvedores podem adicionar um atributo de download especial às suas tags de âncora HTML para instruir os navegadores a tratar um link como um download, em vez de abrir o arquivo de destino. Existem algumas maneiras diferentes de usar o atributo Download para controlar a maneira como os navegadores lidam com seus links de download. Melhor ainda, todos os navegadores modernos suportam o atributo Download, então você não deve ver nenhum problema de compatibilidade ou a necessidade de um substituto.

Image
Image

Existem algumas maneiras diferentes de lidar com o atributo Download. Cada um tem seu próprio benefício e todos funcionam sem problemas em diferentes navegadores.

Atributo de download simples

A maneira mais simples de usar o atributo Download é apenas incluí-lo em sua forma mais básica em suas tags âncora. Você não precisa incluir um nome de arquivo adicional ou qualquer informação de suporte. O resultado fica assim:

Baixe agora!

Image
Image

Ao incluir "download" você está dizendo a qualquer navegador que esteja lendo a página para baixar o link de destino em vez de abri-lo. Nesse caso, o navegador baixará o arquivo exatamente como está com o mesmo nome.

Image
Image

Mudando o nome do arquivo

O que acontece se você realmente quiser mudar o nome. Há muitas ocasiões em que você gostaria de fazer isso. Nomes de arquivos gerados automaticamente são um bom exemplo. Eles geralmente têm nomes ridiculamente longos com sequências de caracteres inúteis. Essa não é a experiência que você deseja para seus visitantes. Você pode padronizar as coisas com o atributo Download.

Para especificar um nome de arquivo, defina o atributo download igual a ele. Exclua a extensão do arquivo. O navegador não pode e não irá converter o tipo de arquivo, então não faz sentido tentar.

Baixe agora!

Seus visitantes farão o download do arquivo como your-file.pdf.

Baixando uma imagem

Juntamente com isso, vem uma maneira simplificada de permitir que seus usuários baixem imagens diretamente. Isso não é revolucionário, e você provavelmente pode montá-lo sozinho, mas você pode usar o atributo download para criar um link de imagem para download.

Image
Image

Comece configurando uma imagem como faria normalmente em sua página. Esta, é claro, será a imagem disponível para download.

Então, encapsule tudo em uma marca âncora, vinculando ao caminho da imagem.

Finalmente, adicione o atributo download à sua tag âncora. Você pode alterar o nome da sua imagem se quiser.


Image
Image

Agora, quando um visitante clicar na imagem, ele fará o download automaticamente diretamente do seu servidor. Não é necessário e pode parecer um exagero para um desenvolvedor, mas quantos visitantes do site pensariam em clicar com o botão direito do mouse em uma imagem para visualizá-la ou baixá-la?

Recomendado: