web-dev-qa-db-fra.com

Comment déclencher un téléchargement de fichier en cliquant sur un bouton HTML ou JavaScript

C'est fou, mais je ne sais pas comment faire cela, et à cause de la fréquence des mots, il est difficile de trouver ce dont j'ai besoin sur les moteurs de recherche. Je pense que cela devrait être facile à répondre.

Je veux un téléchargement de fichier simple, qui ferait la même chose que ceci:

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

Mais je veux utiliser un bouton HTML, par exemple. l'un de ces:

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

De même, est-il possible de déclencher un téléchargement simple via JavaScript?

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

Je suis certainement pas à la recherche d'un moyen de créer une ancre qui ressemble à un bouton, d'utiliser des scripts dorsaux ou de déconner avec des en-têtes de serveur ou des types MIME.

javascripthtmldownload
371
brentonstrine

Pour le bouton que vous pouvez faire

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

J'ai fait des recherches et trouvé la meilleure réponse. Vous pouvez déclencher un téléchargement en utilisant le nouvel attribut HTML5 download.

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

Où :

  • path_to_file est un chemin absolu ou relatif,
  • proposed_file_name le nom du fichier dans lequel enregistrer (peut être vide, puis le nom du fichier par défaut).

J'espère que c'est utile.

QuoiDocumentation

Caniuse

391
Joe Pigott

HTML:

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

Avec jQuery:

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

Vieux fil mais il manque une solution simple en 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)
22
Stefanos Chrs

Vous pouvez le faire avec "astuce" avec iframe invisible. Lorsque vous définissez "src", le navigateur réagit comme si vous cliquez sur un lien avec le même "href". À l'inverse de la solution avec formulaire, il vous permet d'intégrer une logique supplémentaire, par exemple, l'activation du téléchargement après le délai d'expiration, lorsque certaines conditions sont remplies, etc.

Il est également très silencieux, il n’ya pas de nouvelle fenêtre/onglet clignotant comme lors de l’utilisation de 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

Version Bootstrap 

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

Documenté dans Bootstrap 4 docs , et fonctionne également dans Bootstrap 3.

12
CFP Support

Je pense que c'est la solution que vous cherchiez

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

J'ai eu un cas où mon Javascript a généré un fichier CSV. Puisqu'il n'y a pas d'URL distante pour le télécharger, j'utilise l'implémentation suivante.

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

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

Qu'en est-il de:

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

Vous pouvez masquer le lien de téléchargement et faire cliquer le bouton dessus.

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

Si vous recherchez une solution JavaScript Vanilla (pas de jQuery) et sans utiliser l'attribut HTML5, vous pouvez essayer.

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>

Cela ne semble pas fonctionner dans Safari, mais dans Chrome. De plus, changer l'attribut href du lien une fois que l'utilisateur a cliqué dessus semblait le faire fonctionner dans les anciennes versions d'IE, mais pas dans les dernières versions de IE ou Edge.

1
IamGuest

C'est ce qui a finalement fonctionné pour moi puisque le fichier à télécharger a été déterminé lors du chargement de la page.

JS pour mettre à jour l'attribut d'action du formulaire:

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

Appel de JS pour mettre à jour l'attribut d'action du formulaire:

<body onLoad="setFormAction();">

Balise de formulaire avec le bouton d'envoi:

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

Les éléments suivants ont fonctionné NOT:

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

Si vous ne pouvez pas utiliser le formulaire, une autre approche avec downloadjs correspond à Nice. Downloadjs utilise l'API blob et html 5 file sous le capot:

{downloadjs (url, nom du fichier)}) />

* c'est la syntaxe jsx/react, mais peut être utilisé en HTML pur

1
Gleb Dolzikov

Une autre façon de faire si vous avez une URL complexe telle que file.doc?foo=bar&jon=doe consiste à ajouter un champ caché dans le formulaire.

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

inspiré sur la réponse @Cfreak qui n'est pas complète

0
Bellash

N'importe où entre vos balises <body> et </body>, insérez un bouton à l'aide du code ci-dessous:

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

Ceci est sûr de travailler!

0
Ronaldo

attribut de téléchargement le faire

 <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

Vous pouvez simplement utiliser:

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

0
MartinNajemi