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

Question

C'est fou, mais je ne sais pas comment faire cela, et en raison de la façon commune les mots sont, il est difficile de trouver ce dont j'ai besoin sur les moteurs de recherche. Je suis en train de penser cela devrait être une question facile à répondre.

Je veux d'un simple fichier de téléchargement, qui ferait la même chose comme 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 simple téléchargement via Javascript?

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

Je ne suis certainement pas la recherche d'un moyen pour créer un point d'ancrage qui ressemble à un bouton, utilisez n'importe quel back-end de scripts ou de dégât avec le serveur des en-têtes ou des types mime.

Answer 1

J'ai fait quelques recherche et trouve la meilleure réponse. Vous pouvez déclencher un téléchargement en utilisant le nouveau HTML5 download d'attribut.

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

Où :

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

Espérons que cela est utile.

Whatwg de référence

Answer 2

Pour le bouton que vous pouvez faire

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

Answer 3

HTML:

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

Javascript:

 function Download(){
  window.open('file.doc');
}
 

Answer 4

Avec jQuery:

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

Answer 5

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

Il est également très silient, il n'y a pas de clignoter une nouvelle fenêtre/onglet comme lors de l'utilisation d' window.open.

HTML:

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

Javascript:

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