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

Isso é loucura, mas 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. Estou pensando que isso deve ser fácil de responder.

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

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

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

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

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

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

Definitivamente, não estou procurando uma maneira de criar uma âncora parecida com um botão, usar scripts de back-end ou mexer nos cabeçalhos do servidor ou nos tipos MIME.

Para o botão você pode fazer

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

Você pode acionar um download com o downloadatributo HTML5 .

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

Onde:

• path_to_fileé um caminho que resolve para um URL na mesma origem . Isso significa que a página e o arquivo devem compartilhar o mesmo domínio, subdomínio, protocolo (HTTP vs. HTTPS) e porta (se especificado). As exceções são blob:e data:(que sempre funcionam) e file:(que nunca funcionam).
• proposed_file_nameé o nome do arquivo no qual salvar. Se estiver em branco, o navegador usará como padrão o nome do arquivo.

Documentação: MDN , HTML Standard no download , HTML Standard nodownload , CanIUse

HTML:

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

Com jQuery:

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

Tópico antigo, mas está faltando uma solução js simples:

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)

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

Também é muito silencioso, não há novas janelas / abas piscando como no uso window.open.

HTML:

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

Javascript:

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

Versão do Bootstrap

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

Documentado nos documentos do Bootstrap 4 e funciona também no Bootstrap 3.

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

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

Eu tive um caso em que meu Javascript gerou um arquivo CSV. Como não há URL remota para fazer o download, 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);
}

A respeito:

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

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>

Se você está procurando uma solução de baunilha JavaScript (sem jQuery) e sem usar o atributo HTML5, 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>

Foi o que finalmente funcionou para mim, uma vez 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();">

Etiqueta de formulário com o botão enviar:

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

O seguinte NÃO funcionou:

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

Se você não pode usar o formulário, outra abordagem com o downloadjs é adequada. O Downloadjs usa a API de arquivos blob e html 5 sob o capô:

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

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

Em qualquer lugar entre as tags <body>e 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 funcionará!

Outra maneira de fazer, caso você tenha um URL complexo, como file.doc?foo=bar&jon=doeadicionar campo oculto ao formulário

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

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

você pode adicionar tags sem nenhum texto, mas com o link. e quando você clicar no botão como no código, basta executar a função $ ("yourlinkclass"). click ().

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>

Se você usar a <a>tag, não se esqueça de usar o URL inteiro que leva ao arquivo - ou seja:

<a href="http://www.example.com/folder1/file.doc">Download</a>

Para mim, adicionar um botão ao invés de um texto âncora funciona muito bem.

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

Pode não ser bom para a maioria das regras, mas parece muito bom.