Como fazer um botão em HTML para baixar um arquivo

Escrito por g.s. jackson | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer um botão em HTML para baixar um arquivo
Os botões são componentes úteis e flexíveis em HTML (Hemera Technologies/PhotoObjects.net/Getty Images)

Os designers web usam frequentemente botões embutidos em documentos HTML por motivos de funcionalidade e estéticos. Além de oferecerem aos usuários uma forma visualmente agradável de enviar informação ou tomar decisões, os botões permitem diferentes funcionalidades em base à interação do usuário. Neste artigo um botão HTML permitirá a um usuário baixar um arquivo quando for clicado.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Editor de texto
  • Navegador web

Lista completaMinimizar

Instruções

  1. 1

    Crie o arquivo HTML em um editor de texto, como o Notepad. O arquivo básico deverá conter ao menos as etiquetas "html" e "body":

    <html> <body>

    <button type = "button" name = "Download"> Download </button>

    </body> </html>

    O tag "button" contém a informação que descreve o botão. Neste caso, o botão é do tipo genérico "button" e o nome dele é "Download". As palavras entre os tags "<button></button>" aparecerão no botão quando a página for mostrada em um navegador.

  2. 2

    Faça com que o botão aponte a um arquivo quando for clicando por um usuário. Para isso, adicione um evento "onClick":

    <button type = "button" name = "Download" onClick = window.open("http://www.website.com/arquivo/para/dowload.pdf")>Download</button>

    O evento "onClick" se executará quando o usuário clicar no botão. Neste caso ele abrirá uma nova janela apontando para o endereço do arquivo.

  3. 3

    Salve o arquivo e abra-o no navegador web. Salve com a extensão "html" (por exemplo, "teste.html"). Abra-o no navegador. O botão aparecerá no canto superior esquerdo da janela e um clique nele encaminhará o usuário para o arquivo e começará o processo de download.

Dicas & Advertências

  • Este código pode ser copiado e colado em qualquer documento HTML. Leia o site web da "W3C Schools" (w3schools.com) para aprender mais sobre o que os botões HTML podem fazer.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível