Como posso criar um link para download em HTML?


224

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?


11
A marca de aceitação para esta pergunta deve ser alterada.
Pekka

Respostas:


163

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.)


1
por que não usar o atributo de download, se você obtiver um arquivo como um jpg, ele será baixado, em vez de apenas ser aberto.
Ben

2
Por favor, omita o "target = '_ blank'", pois isso não funcionará no IE. Você ainda testou?
Tara

4
@Dudeson, especifique o que "não funcionará" e quais versões do IE você está falando. (Agora é seguro usar a abordagem descrita resposta muito mais recente do TIIUNDER abaixo, embora deva obter a marca de aceitar..)
Pekka

2
@Sergiu a resposta tem sete anos. Eu não posso excluí-lo, e o consulente não respondeu ao meu pedido para mudar a marca ... nada aceitar que podemos fazer, embora eu vou adicionar um link para a resposta mais corrente
Pekka

1
@Dani, veja a resposta do TIIUNDER abaixo, que é a correta agora.
Pekka

455

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.


Eu usei o mesmo código para baixar o arquivo PFD e testei em todos os navegadores, todos são compatíveis, mas no safari esse código não está funcionando como safari em vez de baixar o arquivo pdf aberto em uma nova guia.
Renish Khunt

6
caniuse.com/#search=download%20attribute Funciona no Chrome, Edge, Firefox, Opera e nos navegadores Android 4.4+ mais recentes, e não no Internet Explorer e Safari.
Bart Verkoeijen

Como faço isso se estou criando o link dinamicamente com o clique de um botão?
Nongthonbam Tonthoi

1
@NongthonbamTonthoi não posso você usar javascript para atribuir dinamicamente a href à uma tag
akshay Kishore

1
Isso não está necessariamente funcionando, pois está limitado a URLs da mesma origem.
Nathan

22

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).


4
Mas isso requer uma implementação do lado do servidor, correto?
Lombas 25/11

@ Lombas sim, apenas o servidor pode definir os cabeçalhos de resposta http.
Myobis 26/11/2015

Essa é a resposta completa? Você também precisa enviar um cabeçalho do tipo de conteúdo e ler o arquivo para forçar o download. Pode querer e que a sua resposta. Resposta completa aqui: stackoverflow.com/a/1465631/2757916 .
Govind Rai

isso é perfeito para a implementação no servidor, apenas precisa também o tipo de conteúdo. ele é bem suportado em comparação com o downloadatributo
william.eyidi

9

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>

8

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

Obrigado! isso é muito mais simples e abrange todo o servidor! : A DI encontrou este link que elabora um pouco mais. Obrigado. htaccess-guide.com/adding-mime-types
Joe DF

Isso fará com que todos os arquivos desse tipo sejam baixados apenas. Tudo bem se é isso que você deseja, mas pode causar ajustes se você esquecer e desejar que outro arquivo desse tipo seja exibido no navegador em vez de baixar.
TecBrat 21/09/2015

4

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>

2

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.


1

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.


0

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.


0

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>


-3

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>

O problema com o último é que ele será aberto no navegador, não sendo oferecido para download e salvamento.
Pekka

9
Não vai funcionar; O navegador o tratará como um link relativo para ./www.example.com/name.jpg- você deve usar http://para links absolutos com o domínio especificado.
Delan Azabani

-7

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>

6
Isso é terrível. Quando vejo esse link para download, tenho que resistir à tentação de experimentar index.php? File = index.php que, em uma implementação de copiar / colar do seu código, eventualmente daria a uma pessoa mal-intencionada acesso ao seu banco de dados e quem sabe o quê.
M.Stramm

1
Péssima ideia. Primeiro, porque você está fazendo seu servidor funcionar mais do que o necessário. Segundo, porque os usuários podem baixar qualquer arquivo: p
José Neto
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.