Come attivare il download di un file quando si fa clic su un pulsante HTML o JavaScript

Questo è pazzo ma non so come farlo, e per quanto siano comuni le parole, è difficile trovare quello che mi serve sui motori di ricerca. Sto pensando che dovrebbe essere facile rispondere a questa domanda.

Voglio un semplice download di file, che farebbe lo stesso di questo:

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

Ma voglio usare un pulsante HTML, ad esempio uno di questi:

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

Allo stesso modo, è possibile attivare un semplice download tramite JavaScript?

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

Sicuramente non sto cercando un modo per creare un anchor che assomigli a un pulsante, utilizzare qualsiasi script back-end o pasticciare con le intestazioni del server o i tipi mime.

Per il pulsante che puoi fare

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

È possibile attivare un download con l' downloadattributo HTML5 .

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

Dove:

• path_to_fileè un percorso che si risolve in un URL sulla stessa origine . Ciò significa che la pagina e il file devono condividere lo stesso dominio, sottodominio, protocollo (HTTP vs. HTTPS) e porta (se specificato). Le eccezioni sono blob:e data:(che funzionano sempre) e file:(che non funziona mai).
• proposed_file_nameè il nome file in cui salvare. Se è vuoto, il browser assume automaticamente il nome del file.

Documentazione: MDN , HTML standard su download , HTML standard sudownload , CanIUse

HTML:

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

Con jQuery:

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

Vecchio thread ma manca una semplice soluzione 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)

Puoi farlo con "trucco" con iframe invisibile. Quando si imposta "src" su di esso, il browser reagisce come se si fa clic su un collegamento con lo stesso "href". A differenza della soluzione con modulo, consente di incorporare una logica aggiuntiva, ad esempio attivando il download dopo il timeout, quando vengono soddisfatte alcune condizioni, ecc.

È anche molto flessibile, non c'è nessun nuovo battito di ciglia finestra / scheda come quando si utilizza window.open.

HTML:

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

Javascript:

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

Versione Bootstrap

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

Documentato nei documenti Bootstrap 4 e funziona anche in Bootstrap 3.

Penso che questa sia la soluzione che stavi cercando

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

Ho un caso in cui il mio Javascript ha generato un file CSV. Poiché non è disponibile alcun URL remoto per il download, utilizzo la seguente implementazione.

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

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

Che dire:

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

È possibile nascondere il collegamento per il download e fare clic sul pulsante.

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

Se stai cercando una soluzione JavaScript vanilla (senza jQuery) e senza utilizzare l'attributo HTML5 puoi provare questo.

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>

Questo è ciò che alla fine ha funzionato per me poiché il file da scaricare è stato determinato al caricamento della pagina.

JS per aggiornare l'attributo action del modulo:

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

Chiamata a JS per aggiornare l'attributo action del modulo:

<body onLoad="setFormAction();">

Tag del modulo con il pulsante di invio:

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

Quanto segue NON ha funzionato:

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

Se non riesci a utilizzare il modulo, un altro approccio con downloadjs si adatta bene. Downloadjs usa BLOB e API file HTML 5 sotto il cofano:

{downloadjs (url, nome file)}) />

* è la sintassi jsx / reazioni, ma può essere utilizzata in HTML puro

Ovunque tra i tuoi tag <body>e </body>, inserisci un pulsante usando il codice seguente:

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

Questo sicuramente funzionerà!

Un altro modo di fare nel caso in cui tu abbia un URL complesso come quello file.doc?foo=bar&jon=doedi aggiungere un campo nascosto all'interno del modulo

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

ispirato alla risposta di @Cfreak che non è completa

puoi aggiungere tag senza alcun testo ma con link. e quando fai clic sul pulsante come nel codice, esegui la funzione $ ("yourlinkclass"). click ().

scarica l'attributo fallo

 <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 si utilizza il <a>tag, non dimenticare di utilizzare l'intero URL che porta al file, ovvero:

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

Per me il pulsante di annuncio invece del testo di ancoraggio funziona davvero bene.

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

Potrebbe non essere ok per la maggior parte delle regole, ma sembra abbastanza buono.