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 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 ou l'autre:

<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 cherche certainement pas un moyen de créer une ancre qui ressemble à un bouton, d'utiliser des scripts principaux ou de jouer avec les en-têtes de serveur ou les types MIME.

Pour le bouton que vous pouvez faire

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

Vous pouvez déclencher un téléchargement avec l' downloadattribut HTML5 .

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

Où:

• path_to_fileest un chemin d'accès qui se résout en une URL de la même origine . Cela signifie que la page et le fichier doivent partager le même domaine, sous-domaine, protocole (HTTP vs HTTPS) et port (si spécifié). Les exceptions sont blob:et data:(qui fonctionnent toujours) et file:(qui ne fonctionnent jamais).
• proposed_file_nameest le nom du fichier dans lequel enregistrer. S'il est vide, le navigateur utilise par défaut le nom du fichier.

Documentation: MDN , HTML Standard sur le téléchargement , HTML Standard surdownload , CanIUse

HTML:

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

Avec jQuery:

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

Ancien thread mais il manque une solution js simple:

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)

Vous pouvez le faire avec "truc" avec iframe invisible. Lorsque vous lui définissez "src", le navigateur réagit comme si vous cliquiez sur un lien avec le même "href". Contrairement à la solution avec formulaire, il vous permet d'incorporer une logique supplémentaire, par exemple l'activation du téléchargement après expiration, lorsque certaines conditions sont remplies, etc.

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

HTML:

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

Javascript:

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

Version d'amorçage

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

Documenté dans la documentation de Bootstrap 4 et fonctionne également dans Bootstrap 3.

Je pense que c'est la solution que vous cherchiez

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

J'ai 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);
}

Qu'en est-il de:

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

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

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

Si vous recherchez 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>

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 n'ont PAS fonctionné:

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

Si vous ne pouvez pas utiliser le formulaire, une autre approche avec downloadjs convient bien. Downloadjs utilise l'API de fichier blob et html 5 sous le capot:

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

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

N'importe où entre vos balises <body>et </body>, insérez 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!

Une autre façon de faire si vous avez une URL complexe telle que l' file.doc?foo=bar&jon=doeajout d'un champ caché à l'intérieur du 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é de la réponse @Cfreak qui n'est pas complète

vous pouvez ajouter une balise sans texte mais avec un lien. et lorsque vous cliquez sur le bouton comme dans le code, exécutez simplement la fonction $ ("yourlinkclass"). click ().

attribut de téléchargement

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

Si vous utilisez la <a>balise, 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>

Pour moi, ajouter un bouton au lieu d'un texte d'ancrage fonctionne très bien.

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

Ce n'est peut-être pas correct selon la plupart des règles, mais ça a l'air plutôt bien.