Como posso criar um link para download em HTML?

Eu tenho uma idéia básica de HTML. Quero criar o link de download no meu site de amostra, mas não tenho idéia de como criá-lo. Como faço para criar um link para baixar um arquivo em vez de visitá-lo?

Esta resposta está desatualizada. Temos agora a downloadatributo . (veja também este link para MDN )

Se "link de download" significa um link para um arquivo para download, use

  <a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>

o target=_blankfará uma nova janela do navegador aparecer antes do download é iniciado. Essa janela geralmente será fechada quando o navegador descobrir que o recurso é um download de arquivo.

Observe que os tipos de arquivos conhecidos pelo navegador (por exemplo, imagens JPG ou GIF) geralmente serão abertos no navegador.

Você pode tentar enviar os cabeçalhos certos para forçar um download como descrito, por exemplo, aqui . (é necessário script do lado do servidor ou acesso às configurações do servidor.)

Nos navegadores modernos que suportam HTML5, é possível o seguinte:

<a href="link/to/your/download/file" download>Download link</a>

Você também pode usar isso:

<a href="link/to/your/download/file" download="filename">Download link</a>

Isso permitirá que você altere o nome do arquivo que está sendo baixado.

Além (ou substituindo) do <a downloadatributo do HTML5 já mencionado,
o comportamento do download no disco do navegador também pode ser acionado pelo seguinte cabeçalho de resposta http:

Content-Disposition: attachment; filename=ProposedFileName.txt;

Essa era a maneira de fazer antes do HTML5 (e ainda funciona com navegadores compatíveis com HTML5).

Um link de download seria um link para o recurso que você deseja baixar. É construído da mesma maneira que qualquer outro link seria:

<a href="path to resource.name of file">Link</a>

<a href="files/installer.exe">Link to installer</a>

Para vincular ao arquivo, faça o mesmo que qualquer outro link de página:

<a href="...">link text</a>

Para forçar o download de coisas, mesmo que tenham um plug-in incorporado (Windows + QuickTime = ugh), você pode usá-lo no seu htaccess / apache2.conf:

AddType application/octet-stream EXTENSION

Esse tópico provavelmente já é antigo, mas funciona em html5 para o meu arquivo local.

Para pdfs:

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></p>

Isso deve abrir o pdf em uma nova janela e permitir que você faça o download (pelo menos no Firefox). Para qualquer outro arquivo, basta torná-lo o nome do arquivo. Para imagens e músicas, convém armazená-las no mesmo diretório do seu site. Então seria como

<p><a href="images/logo2.png" download>test pdf</a></p>

O atributo de download não funciona no IE, mas ignora completamente o "download". O download não funciona no Firefox se o href apontar para um site remoto. Portanto, o exemplo de Odin não funciona no Firefox 41.0.2.

Há mais uma sutileza que pode ajudar aqui.

Quero ter links que permitam a reprodução e exibição no navegador, bem como um para o download puramente. O novo atributo de download é bom, mas não funciona o tempo todo porque a compulsão do navegador em reproduzir ou exibir o arquivo ainda é muito forte.

MAS .. isso se baseia no exame da extensão no nome do arquivo da URL! Você não deseja mexer no mapeamento de extensões do servidor porque deseja entregar o mesmo arquivo de duas maneiras diferentes. Portanto, para o download, você pode enganá-lo, colocando o arquivo com um nome opaco para esse mapeamento de extensão, apontando para ele e usando o recurso de renomeação do download para corrigir o nome.

<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>

Eu esperava que apenas fazer uma consulta fictícia no final ou ofuscar a extensão funcionasse, mas, infelizmente, não funciona.

O atributo de download é novo para a <a>tag em HTML5

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
ou
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

Eu prefiro o primeiro, é preferível em relação a qualquer extensão.

Você pode fazer o download de várias maneiras que você pode seguir o meu caminho. Embora os arquivos não possam ser baixados devido à permissão 'allow-popups' não estar definida, mas em seu ambiente, isso funcionará perfeitamente

<div className="col-6">
                    <a  download href="https://www.w3schools.com/images/myw3schoolsimage.jpg" >Test Download </a>
                </div>

outro também falhará devido a 'X-Frame-Options' para 'sameorigin'.

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>

Como isso

<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>

Portanto, um arquivo name.jpg em um site example.com ficaria assim

<a href="www.example.com/name.jpg">Image</a>

eu sei que estou atrasado, mas é isso que recebi após 1 hora de pesquisa

 <?php 
      $file = 'file.pdf';

    if (! file) {
        die('file not found'); //Or do something 
    } else {
       if(isset($_GET['file'])){  
        // Set headers
        header("Cache-Control: public");
        header("Content-Description: File Transfer");
        header("Content-Disposition: attachment; filename=$file");
        header("Content-Type: application/zip");
        header("Content-Transfer-Encoding: binary");
        // Read the file from disk
        readfile($file); }
    }

    ?>

e para link para download eu fiz isso

<a href="index.php?file=file.pdf">Download PDF</a>