web-dev-qa-db-fra.com

Comment télécharger un fichier sans utiliser l'élément <a> avec l'attribut de téléchargement ou un serveur?

Selon caniuse l'attribut download de <a> l'élément est pris en charge dans Microsoft Edge build 10547 + , mais pas IE ou Safari .

Comment télécharger un objet fichier sans utiliser <a> élément avec download jeu d'attributs ou un serveur?

javascripthtmlfiledownloadfileapi
11
guest271314

Il existe plusieurs façons de déclencher un téléchargement. Voici quelques exemples:

Utilisez un formulaire:

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

Utilisez javascript:

<button type="submit" onclick="window.open('mydoc.doc')">Download</button>
14
Leo Farmer

Bien que je soutienne la réponse de @ LeoFarmer, je voudrais proposer deux approches "piratables":

  1. Si le fichier est très petit, vous pouvez utiliser a avec le href='data:[<mediatype>][;base64],<data>' .

    Cela pourrait vous permettre d'ajouter une disposition de contenu dans le mediatype, en émulant un en-tête HTTP. Ce hack n'est pas aussi portable que l'on pourrait espérer.

  2. Sur les fichiers petits à moyens, il est possible de télécharger le fichier en utilisant AJAX, puis tilisez l'API Javascript File pour demander l'enregistrement du fichier (l'API ne prend pas en charge l'enregistrement, mais il est facile de convertir les données vers une URL de données).

    Si vous voulez éviter l'API Javascript File, vous pouvez essayer d'émuler un clic d'ancrage, comme suggéré ici .

Encore une fois, comme l'a souligné Leo Farmer, ces solutions ne peuvent pas promettre que le navigateur n'ouvrira pas le fichier dans un nouvel onglet au lieu de l'enregistrer sur le disque, mais je pense qu'il est prudent de dire que tous les utilisateurs pourront se dégradent gracieusement en cmd+S ou ctrl+S raccourci clavier :-)

3
Myst

Vous pouvez le faire en utilisant à la fois l'attribut de téléchargement et jquery. l'attribut de téléchargement ne prend pas en charge ie et safari/ios. Vous pouvez donc utiliser jquery pour ce faire

 $('.download').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = 'uploads/file.doc';
});

<a href="no-script.html" class="download">Download</a>
2
Jahid Hasan

Utilisez FileSaver.js

Il prend en charge tous les navigateurs couramment utilisés.

Il suffit d'inclure: 

<script type="text/javascript" src="FileSaver.min.js"></script>

et utilisez-le comme: 

var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
saveAs(file);

Remarque: Pour le faire fonctionner également dans Safari <6, Opera <15 et FireFox <20, vous devez inclure Blob.js comme dépendance.

1
padr

Vous pouvez utiliser data URIdata:[<mediatype>][;base64],<data> Représentation du fichier créé manuellement ou en utilisant FileReader(), .readAsDataURL(), avec MIME type défini sur application/octet-stream , encodeURIComponent(), window.open()

<script>
  var file = "data:application/octet-stream,"
             + encodeURIComponent("<!DOCTYPE html>"
             + "<html><body>"
             + "<div>abc</div>"
             + "</body></html>");
  var saveFile = window.open(file, "_self");     
</script>

<script>
  var blob = new Blob(["abc"], {type:"text/plain"});
  var reader = new FileReader();
  reader.addEventListener("load", function(e) {
    // replace existing `MIME` type with `application/octet-stream`
    var file = "data:application/octet-stream;" 
                + e.target.result.split(/;/)[1];
    var saveFile = window.open(file, "_self");
  });
  reader.readAsDataURL(blob)
</script>

plnkr http://plnkr.co/edit/IS1OC0laRwL3BuuF9zay?p=preview

1
guest271314