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

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 un simple téléchargement de fichier, 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 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.

C'est faux parce que la bible dit que c'est un péché. 😉 Et parce que je veux simplement utiliser un bouton HTML, et je n'ai pas peur d'apprendre quelque chose de nouveau.
Grâce à vous "comment déclencher le téléchargement d'un fichier en javascript" permettrait de donner des réponses beaucoup plus rapide pour le futur chercheur.

InformationsquelleAutor brentonstrine | 2012-07-23

265

Pour le bouton que vous pouvez faire
```
<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>
```
- Vous pouvez enregistrer la balise form et il suffit d'ajouter le onclick de la balise button.
- Vous pouvez toujours le style de la balise d'ancrage comme un bouton!
- ne pas agir comme un déclencheur, juste rediriger vers l'url comme 'un' tag.
- Cela fonctionne mieux : <a href="chemin_vers_fichier" download="proposed_file_name">Télécharger</a>
- même aujourd'hui, le téléchargement de l'attribut n'est pas pris en charge dans IE 11 (il est maintenant pris en charge à Bord) et il n'est pas pris en charge dans Safari. En 2012, lorsque la réponse a été posté il n'était pas pris en charge dans tous les principaux navigateurs.
- quelle est la différence entre le fait d'avoir un point d'ancrage avec une touche de style et d'avoir un formulaire avec un bouton?
- l'OP voulait savoir comment le faire avec un bouton de formulaire.
- Not allowed to load local resource que pouvons-nous faire avec cette erreur?
- on dirait que vous essayez d'accéder à une ressource locale, tandis que sur un serveur ou d'un autre autorisation erreurs liées au fichier que vous souhaitez accéder. Vraiment aucun rapport avec ce code. Vous pouvez essayer de l'afficher comme une nouvelle question.
InformationsquelleAutor Cfreak
401

Vous pouvez déclencher un téléchargement avec le HTML5 download attribut.
```
<a href="path_to_file" download="proposed_file_name">Download</a>
```
Où:
- path_to_file est un chemin qui correspond à une URL sur le même origine. Cela signifie que la page et le fichier doit partager le même domaine, sous-domaine, le protocole HTTP (vs HTTPS), et le port (si spécifié). Les Exceptions sont blob: et données: (qui travaille toujours), et fichier: (qui ne fonctionne jamais).
- proposed_file_name est le nom du fichier à sauvegarder. Si ce champ est vide, le navigateur par défaut le nom du fichier.
Documentation: MDN, HTML Standard sur le téléchargement, HTML Standard sur télécharger, CanIUse
- Fonctionne pas Avec Safari et certaines versions d'IE
- Est-il un javascript contourner pour obtenir la même fonctionnalité? Réponses restants, ne pas reproduire la même fonction. Ils ouvrent une nouvelle fenêtre ou déplacer de différentes url.
- Le lien pour caniuse est déjà dans le post
- Nice. Être capable de renommer le fichier à télécharger est un brillant caractéristique. Souhaite qu'il fonctionne dans Safari, bien que, semble-t-il pris en charge dans la prochaine version, bien que, selon caniuse.
- En utilisant une combinaison de download et target="_blank" semble être suffisant pour couvrir la plupart des cas d'utilisation. Les navigateurs qui comprennent download le traiter comme un téléchargement, sinon c'est ouvert dans un nouvel onglet.
- Comment cela peut-il être appliqué à un bouton de l'objet au lieu de simplement un une balise?
- En fait, cela ne fonctionne que pour les url de la même origine, comme mentionné dans le MDN docs. C'est une énorme limitation, si nous cherchons à développer une solution générique
- vous avez juste envelopper de votre bouton à l'intérieur de l'un.. <a href="chemin_vers_fichier" download="proposed_file_name"><button type=button">Mon Bouton</button></a>
- En outre, vous obtiendrez cette sortie de la console lorsque le href du lien est en "https": "Le téléchargement attribut est ignoré parce que son attribut href est une url différente sécurité", même si la page que vous téléchargez à partir de est également en cours d'exécution sur https
- La question est explicitement demandé d'utiliser un bouton au lieu d'un lien
- salut, cette solution ci-dessus n'est pas ce dont j'ai besoin, c'est de l'ouverture du fichier ou l'image dans un nouvel onglet mais je veux télécharger un fichier.
- Merci cela a fonctionné pour moi.
InformationsquelleAutor Joe Pigott
71

HTML:
```
<button type="submit" onclick="window.open('file.doc')">Download!</button>
```
- Meilleur et le plus propre solution. Mais vous n'avez pas besoin d'un Javascript ici. Partie HTML avec le onclick est assez.
- Que faire si je veux télécharger un fichier xml?
- Merci pour votre code. Je l'ai testé, il peut travailler dans IE, Chrome, Firefox.
- Si vous avez un fichier acceptable par le navigateur comme un PDF, il va ouvrir dans un nouvel onglet au lieu de montrer boîte de dialogue de téléchargement.
- onclick JavaScript est-il et peut-être désactivé par les navigateurs ou les XSS en-têtes.
- de la fenêtre.ouvrir peut déclencher des pop-up bloquer dans un navigateur et n'est donc pas recommandé. Vous pouvez utiliser la fenêtre.location = 'chemin' , bien que ce serait aller à l'emplacement dans la même fenêtre de navigateur.
InformationsquelleAutor sleepyup
65

Avec jQuery:
```
$("#fileRequest").click(function() {
    ////hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});
```
- Parfait, merci. Savez-vous si la plupart des serveurs de définir le Contenu de la Disposition à la 'pièce jointe' par défaut?
- Il n'y a pas de "plus". Il dépend entièrement. Ne comptez pas sur qu'il soit réglé.
- Cette question a été conduite me balistiques, et c'était la seule option qui a travaillé (et est pris en charge par IE). J'ajouterai pour toute n00bs comme moi que pour définir le Contenu de la Disposition, tout ce que vous avez à faire est de: <?php header('Content-Disposition: attachment; filename="nom de fichier.ici,"'); ? >
- Pas de jquery. Période.
- Même avec le bon Content-Disposition, Chrome donne un avertissement: Resource interpreted as Document but transferred with MIME type application/pdf ou quel que soit le Type de Contenu est. C'est apparemment bénignes.
- Ce qui les fais fonctionner que si vous êtes en train de télécharger une image, ouvrez l'image dans le navigateur
InformationsquelleAutor Matt Ball
24

Vieux thread mais il ne manque plus qu'un simple js solution:
```
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)
```
- Sorte de me rappelle de ce bijou: image.de la fic.co/dtkUWJ/Selection_002.png
- Cela fonctionne sur Chrome mais pas sur Firefox pour moi.
- quelle est la version de FF?
- Vous avez raison, Firefox ne permet pas ceci sans l'ajout de l'élément de corps d'abord. Merci, la mise à jour de la réponse
- Grand merci à tous! Cette solution très facile et l'effet:)
- Est-il possible que la fonction javascript être déclenchée une fois le téléchargement terminé? Juste essayer de montrer un message une fois les téléchargements de début et de supprimer le message une fois le téléchargement terminé.
- pas que c'est au niveau du navigateur
InformationsquelleAutor Stefanos Chrs
21

Vous pouvez le faire avec le "truc" avec iframe invisible. Lorsque vous définissez "src" pour elle, 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 de window.open.

HTML:
```
<iframe id="invisible" style="display:none;"></iframe>
```
Javascript:
```
function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}
```
- ce qui ne fonctionne pas dans Chrome?
- Il ne, au moins si vous avez réellement apprnf l'iframe du document.corps.
- Cela ne semble pas fonctionner dans google Chrome, dès maintenant, même si il l'habitude de travailler. Je me demande si ce genre de façon intermittente des arrêts de travail dans les différentes versions de google Chrome.
- Fonctionne dans Chrome à partir de la Version 61.0.3163.100 (compilation Officiel) (64-bit)
- Ne fonctionne pas avec les images dans Firefox v57. Il rend juste l'image dans l'iframe.
InformationsquelleAutor Danubian Sailor
13

De Démarrage De La Version
```
<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>
```
Documenté dans le Bootstrap 4 docs, et travaille dans le Bootstrap 3.
- La seule chose que cela a à voir avec le Bootstrap est la classe des noms, c'est juste la puissance de HTML5.
- La question est explicitement demandé comment faire cela avec un bouton au lieu d'un lien.
InformationsquelleAutor CFP Support
10

Je pense que c'est la solution que vous recherchez
```
<button type="submit" onclick="window.location.href='file.doc'">Download!</button>
```
J'ai un cas où mon Javascript généré un fichier CSV. Puisqu'il n'est pas à distance de l'URL pour le télécharger j'utilise la suite de la mise en œuvre.
```
downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}
```
- Sympa 😉 .......
- sur 404 -> changement de page à une page d'erreur 404. même problème comme indiqué sur l'autre location.href solutions.
InformationsquelleAutor Delconis
9

Ce sujet:
```
<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
```
- Cela ne fonctionne pas, si votre fichier, par exemple, est une image, puisqu'il s'agirait juste d'être ouvert dans le navigateur.
- Un autre problème se produit si le fichier est manquant, il parcourt l'intégralité de la page à une page 404
InformationsquelleAutor olli
6

Vous pouvez masquer le lien de téléchargement et rendre le bouton sur lequel vous cliquez.
```
<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>
```
- Pour que cela fonctionne dans Firefox, la ressource doit être sur le même domaine que le document. Réglage de la SCRO en-têtes ne pas de l'aide.
- Ne jamais faire cela
- pourquoi pas?
InformationsquelleAutor Starwarswii

Si vous cherchez à la vanille, JavaScript (pas de jQuery) et de solution sans l'aide de l'attribut HTML5, vous pouvez essayer ce.

JS:

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

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}

CSS:

.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}

HTML:

<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>

InformationsquelleAutor David Willhite

1

C'est ce qui a finalement fonctionné pour moi depuis le fichier à télécharger a été déterminé lorsque la page est chargée.

JS pour mettre à jour l'attribut action du formulaire:
```
function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}
```
Appel JS pour mettre à jour l'attribut action du formulaire:
```
<body onLoad="setFormAction();">
```
Balise de formulaire avec le bouton soumettre:
```
<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>
```
Suivantes ne PAS travail:
```
<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
```
- probablement parce que si vous avez le fichier au moment du chargement, vous pouvez pas seulement de rendre l'action sur le serveur à l'aide d'un moteur de template? pourquoi le besoin de code js?
InformationsquelleAutor slayernoah
1

Si vous ne pouvez pas utiliser le formulaire, une autre approche avec downloadjs ajustement de nice. Downloadjs utilisation blob et html 5 de fichiers de l'API sous le capot:

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

*c'est jsx/réagir la syntaxe, mais peut être utilisé en pur html
- Pour éviter les problèmes de la SCRO pour les images sur d'autres domaines, mettre crossorigin="anonymes" dans la balise img, comme ceci: <img src="image.png" crossorigin="anonymes" />
InformationsquelleAutor Gleb Dolzikov
0

N'importe où entre votre <body> et </body> les balises, les mettre dans un bouton à l'aide du code ci-dessous:
```
<button>
    <a href="file.doc" download>Click to Download!</a>
</button>
```
C'est sûr que pour le travail!
- Il n'est pas dans IE ou Bord...
- Pour Chrome, il est une excellente solution
- Ne fonctionne pas sous Safari, soit: W3 Écoles
- Ne travaillant pas dans le MS navigateurs est un gros problème et Chrome n'est pas toujours la réponse.
- Vous ne pouvez pas mettre un lien à l'intérieur d'un bouton en HTML
InformationsquelleAutor Ronaldo
0

télécharger attribut 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>
```
- J'aime votre réponse
- La question est explicitement demandé comment faire cela avec un bouton au lieu d'un lien.
InformationsquelleAutor Rohallah Hatami
0

Une autre façon de faire dans le cas où vous avez une URL complexe comme file.doc?foo=bar&jon=doe est d'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 @Cfreak réponse qui n'est pas complète

InformationsquelleAutor Bellash
0

vous pouvez ajouter une balise sans texte, mais avec un lien. et lorsque vous cliquez sur le bouton que vous avez dans le code , il suffit d'exécuter le $("yourlinkclass").cliquez sur la (les) fonction.

InformationsquelleAutor ThisisFish
-5

Pour moi ading bouton à la place de l'ancre texte fonctionne vraiment bien.
```
<a href="file.doc"><button>Download!</button></a>
```
Il pourrait ne pas être ok par la plupart des règles, mais il semble assez bon.
- Cela ne fonctionne que parce que votre navigateur ne prend pas en charge .les fichiers doc.
- Le HTML n'est pas valide. <a> éléments peut ne pas contenir <button> éléments.
InformationsquelleAutor Brana
-6

Si vous utilisez le <a> tag, n'oubliez pas d'utiliser la totalité de l'url qui mène au fichier -- c'est à dire:
```
<a href="http://www.example.com/folder1/file.doc">Download</a>
```
- Je ne pense pas que le problème ici. Aussi "l'absolu" chemin d'accès n'est pas nécessaire si le lien est dans le même chemin que le fichier.
- vous êtes, bien sûr, correct sur le chemin absolu, cependant, c'est la meilleure façon de faire de certains pour obtenir la droite. Je vais laisser à l'OP de décider si elle a été utile -
- La question est explicitement demandé comment faire cela avec un bouton au lieu d'un lien.
- le téléchargement de l'attribut est manquant dans cette solution. Même après l'ajout de télécharger des attributs, il ne fonctionnera pas pour les inter-domaine.
InformationsquelleAutor Mark

Vous devez vous connecter pour publier un commentaire.