ti-enxame.com

Como disparar um download de arquivo ao clicar em um botão HTML ou JavaScript

Isso é loucura, mas eu não sei como fazer isso, e por causa de quão comuns são as palavras, é difícil encontrar o que eu preciso nos mecanismos de busca. Eu estou pensando que isso deveria ser fácil de responder.

Eu quero um download de arquivo simples, que faria o mesmo que isso:

<a href="file.doc">Download!</a>

Mas eu quero usar um botão HTML, por exemplo qualquer um destes:

<input type="button" value="Download!">
<button>Download!</button>

Da mesma forma, é possível acionar um download simples via JavaScript?

$("#fileRequest").click(function(){ /* code to download? */ });

Eu definitivamente estou não procurando uma maneira de criar uma âncora que se pareça com um botão, use qualquer script de back-end ou mexa com cabeçalhos de servidor ou tipos MIME.

353
brentonstrine

Para o botão você pode fazer

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>
244
Cfreak

Eu fiz algumas pesquisas e encontrei a melhor resposta. Você pode acionar um download usando o novo atributo download HTML5.

<a href="path_to_file" download="proposed_file_name">Download</a>

Onde :

  • path_to_file é um caminho absoluto ou relativo,
  • proposed_file_name o nome do arquivo para salvar (pode ser em branco, então o nome padrão do arquivo é real).

Espero que isso seja útil.

WhatwgDocumentação

Eu posso usar

377
Joe Pigott

Com jQuery:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});
64
Matt Ball

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>
62
sleepyup

Você pode fazer isso com "truque" com um iframe invisível. Quando você define "src" para ele, o navegador reage como se você clicasse em um link com o mesmo "href". Como oposto à solução com forma, permite incorporar lógica adicional, por exemplo, ativando o download após o tempo limite, quando algumas condições são atendidas, etc.

Também é muito silencioso, não há uma nova janela/guia piscante como quando se usa window.open.

HTML:

<iframe id="invisible" style="display:none;"></iframe>

Javascript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}
21
Danubian Sailor

Tópico antigo, mas falta uma solução simples de js:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
16
Stefanos Chrs

Versão de bootstrap

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

Documentado no Bootstrap 4 docs , e funciona também no Bootstrap 3.

12
CFP Support

Eu acho que essa é a solução que você estava procurando

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

Eu tenho um caso em que o meu Javascript gerou um arquivo CSV. Como não há um URL remoto para baixá-lo, uso a seguinte implementação.

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}
8
Delconis

Sobre o quê:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
7
olli

Você pode ocultar o link de download e clicar no botão.

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>
6
Starwarswii

Se você está procurando uma solução Vanilla JavaScript (sem jQuery) e sem usar o atributo HTML5, você pode tentar isso.

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}
.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}
<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>
3
David Willhite
 <a href="complexDownload" download="file.doc" onclick="this.href='file.doc';">
     <button>Download <i>File.doc</i> Now!</button>
 </a>

Não parece funcionar no Safari, mas funcionou no Chrome. Além disso, alterar o atributo href do link depois que o usuário clicou pareceu fazê-lo funcionar em versões mais antigas do IE, mas não nas versões mais recentes de IE ou Edge.

1
IamGuest

Em qualquer lugar entre as tags <body> e </body>, coloque um botão usando o código abaixo:

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

Isso com certeza vai funcionar!

1
Ronaldo

Isto é o que finalmente funcionou para mim desde que o arquivo a ser baixado foi determinado quando a página é carregada.

JS para atualizar o atributo de ação do formulário:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

Chamando JS para atualizar o atributo de ação do formulário:

<body onLoad="setFormAction();">

Tag de formulário com o botão de envio:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

O seguinte fezN&ATILDE;Owork:

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
1
slayernoah

Se você não pode usar o formulário, outra abordagem com downloadjs fit Nice. Downloadjs usam blob e html 5 file API sob o capô:

{downloadjs (url, nome do arquivo)}) />

* é a sintaxe jsx/react, mas pode ser usada em html puro

1
Gleb Dolzikov

Outra maneira de fazer caso você tenha uma URL complexa, como file.doc?foo=bar&jon=doe, é adicionar um campo oculto dentro do formulário

<form method="get" action="file.doc">
  <input ty='hidden' name='foo' value='bar'/>
  <input ty='hidden' name='john' value='doe'/>
  <button type="submit">Download Now</button>
</form>

inspirado na resposta do @Cfreak que não está completa

0
Bellash

atributo de download faça

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>
0
Rohallah Hatami

Você poderia simplesmente usar:

<form action="/file.doc" align="center"> <input type="submit" id="custom-buttons" value="Click Here To Download" /> </form>

0
MartinNajemi