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, et à cause de la façon dont les mots sont communs, 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 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 ceux-ci:
<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 définitivement pas la recherche d'un façon de créer une ancre qui ressemble à un bouton, Utiliser des scripts back-end, ou mess avec des en-têtes de serveur ou des types mime.
19 réponses
Pour le bouton, vous pouvez faire
<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
J'ai fait quelques 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_fileest un chemin absolu ou relatif, -
proposed_file_namele nom de fichier à enregistrer (peut être vide, puis par défaut le nom de fichier réel).
J'espère que cela est utile.
Avec jQuery:
$("#fileRequest").click(function() {
// // hope the server sets Content-Disposition: attachment!
window.location = 'file.doc';
});
HTML:
<button type="submit" onclick="window.open('file.doc')">Download!</button>
Vous pouvez le faire avec "trick" avec iframe invisible. Lorsque vous définissez "src", le navigateur réagit comme si vous cliquiez sur un lien avec le même "href". Comme opposé à la solution avec form, il vous permet d'intégrer une logique supplémentaire, par exemple en activant le téléchargement après le délai d'attente, lorsque certaines conditions sont remplies, etc.
C'est aussi très silient, il n'y a 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";
}
Vieux thread mais il manque une solution js simple:
let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
a.click()
Qu'en est-il de:
<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
Démarrage De La Version
<a class="btn btn-danger" role="button" href="path_to_file" download="proposed_file_name">Download</a>
Documenté dans Bootstrap 4 docs , et fonctionne aussi dans Bootstrap 3.
Je pense que c'est la solution que vous recherchez
<button type="submit" onclick="window.location.href='file.doc'">Download!</button>
J'avais un cas où mon Javascript a généré un fichier CSV. Comme 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);
}
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>
N'importe où entre vos balises <body> et </body>, Mettez un bouton en utilisant le code ci-dessous:
<button>
<a href="file.doc" download>Click to Download!</a>
</button>
C'est sûr de fonctionner!
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>
Ce qui suit a fait Pas travail:
<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
<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 cela a fonctionné dans Chrome. En outre, la modification de l'attribut href du lien une fois que l'Utilisateur a cliqué, il semblait le faire fonctionner dans les anciennes versions D'IE, mais pas dans les dernières versions D'IE ou Edge.
Si vous cherchez une solution JavaScript vanille (pas de jQuery) et sans utiliser l'attribut HTML5, vous pouvez essayer ceci.
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>Une autre façon de faire dans le cas où vous avez une URL complexe telle que file.doc?foo=bar&jon=doe est d'ajouter un champ caché dans le formulaire
<form method="get" action="file.doc">
<input ty='hidden' name='foo' value='bar'/>
<input ty='hidden' name='john' value='doe'/>
<button type="submit">Download Now</button>
</form>
Inspiré sur la réponse @ Cfreak qui n'est pas complète
Si vous ne pouvez pas utiliser form, une autre approche avec downloadjs convient bien. Downloadjs utilise BLOB et html 5 API de fichiers sous le capot:
{downloadjs(url, nom de fichier)})/>
*c'est la syntaxe JSX/react, mais peut être utilisée en html pur
Pour moi, le bouton ading au lieu du texte d'ancrage fonctionne très 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.
Si vous utilisez la balise <a>, n'oubliez pas d'utiliser l'url entière qui mène au fichier - c'est-à-dire:
<a href="http://www.example.com/folder1/file.doc">Download</a>
Utilisez un lien normal et le style pour ressembler à un bouton, en utilisant CSS.