7
votes

Comment télécharger un fichier avec javascript?

Je veux pouvoir télécharger un fichier donné en appuyant sur un bouton. Le fichier sera fourni via un appel API Pour l'instant, je l'aurai dans mon stockage local. Donc, mon dossier est quelque chose comme:

<a download="sample.csv" onclick="download()"></a>

function download|(){
   .....code that calls the `api`
}

Comment puis-je créer un link téléchargement? J'ai essayé jusqu'à présent avec: <a download="sample.csv"></a> J'ai également essayé d'utiliser un événement onclick :

rootFolder
-JS file
-HTML file
-download file (`sample.csv`)

Je ne sais pas comment ces 2 s'adaptent: the download API de the download s'il y en a une et le gestionnaire d'événements click si vous prévoyez de faire une logique supplémentaire lors du téléchargement.

javascript download

3 commentaires

«Pour l'instant, je l'aurai dans mon stockage local» - voulez-vous dire développeur.mozilla.org/ en-US/docs/Web/API/Window/ localStorage ‌, ou parlez-vous simplement du fichier situé dans le système de fichiers du serveur à l'endroit où vous l'avez décrit?

Le fichier est situé dans le système de fichiers du serveur à l'endroit que j'ai décrit.

D'accord, alors il vous suffit de faire les choses correctement, et cela devrait fonctionner… Vous devez toujours utiliser l'attribut href du lien pour faire référence au fichier; download est un attribut supplémentaire que vous ajoutez. developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attribut‌ es

3 Réponses :

11
votes

Vous pouvez fournir le lien vers cette fonction pour télécharger le fichier:

function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

2 commentaires

Et si le fichier est dans mon stockage local, il fonctionne tout de même?

qu'entendez-vous exactement par stockage local? n'utilisez-vous aucun serveur local?

1
votes

Vous pouvez le faire via HTML <a href="/path/to/sample.csv"></a> , mais si vous devez le faire dans JS, il y a https://github.com/eligrey/FileSaver.js / bibliothèque.

0 commentaires

1
votes

étant donné que la réponse de @saibbyweb ne fonctionne pas dans tous les navigateurs au moment où j'écris ceci, je recommande une autre solution similaire, testée et fonctionnant dans la dernière version (au moment de la rédaction) Firefox, Chrome, Opera, Edge, Safari, Safari mobile, Chrome mobile :

function downloadUrl(url){
    window.open(url, '_self');
}

Inutile de dire que vous pouvez également ouvrir des liens dans de nouveaux onglets avec _blank au lieu de _self, mais vous risquez de surprendre les bloqueurs de fenêtres contextuelles en ouvrant de nouveaux onglets / fenêtres avec Javascript.

0 commentaires