Comment créer un fichier dans la mémoire pour l'utilisateur de télécharger, mais pas par le biais du serveur?

Est-il possible que je peux créer un fichier texte sur le côté client et invite l'utilisateur à télécharger, sans aucune interaction avec le serveur?
Je sais que je ne peux pas écrire directement à leur machine (sécurité et tout et tout), mais je peux les créer et de les inciter à le sauver?

InformationsquelleAutor Joseph Silber | 2010-09-08
  1. 399

    Vous pouvez utiliser les données Uri. Prise en charge du navigateur varie; voir Wikipédia. Exemple:

    <a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

    L'octet-stream est de forcer une fenêtre de téléchargement. Sinon, il va probablement ouvrir dans le navigateur.

    Pour CSV, vous pouvez utiliser:

    <a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

    Essayer le jsFiddle démo.

    • Ce n'est pas un navigateur croix une solution, mais certainement quelque chose d'intéressant à regarder. Par exemple, IE les limites des données de l'uri. IE 8 les limites de taille de 32 KO et IE 7 et inférieur ne supporte pas du tout.
    • oui, cela ne fonctionne pas dans n'importe quelle version de IE, parce que les données Uri ne sont pas autorisés dans a éléments.
    • dans google Chrome, la Version 19.0.1084.46, cette méthode génère le message d'avertissement suivant : "Ressource interprété comme Document mais transféré, avec le type MIME text/csv: "data:text/csv,champ1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A"." Une téléchargement n'est pas déclenché
    • oui, apparemment, il ne fonctionne pas dans Chrome, même avec de l'octet-stream.
    • Il fonctionne dans Chrome maintenant (testé contre v20 et v21) mais pas IE9 (c'est peut-être juste le jsFiddle, mais de toute façon j'en doute).
    • Je suis de l'acceptation de cette réponse, car il semble y avoir aucun autre moyen pour ce faire...
    • Ne fonctionne pas avec ie8 et ie9 car ces navigateurs uniquement en charge les données de uri pour les images. Ref: stackoverflow.com/questions/12042847/...
    • Comme naren a noté avec sa réponse, Firefox a besoin du lien pour être présent dans le document pour le téléchargement.
    • Ne fonctionne pas du tout dans Safari (7.0.4). Aussi, comme de Chrome 36.0.1985.97 bêta, il ne semble pas possible de nommer le fichier en utilisant le téléchargement de l'attribut.
    • Le jsFiddle démo ne fonctionne pas dans IE11.
    • Aussi, à l'aide de Chrome 37.0.2062.120, le navigateur se bloque lorsque le base64 chaîne est trop longue.
    • J'étais comme - qui est-ce qui relie à wikipédia pour le navigateur compat - ah ok 🙂
    • Le bon jeu de caractères est presque certainement l'UTF-16, sauf si vous avez le code de la conversion en UTF-8. JavaScript utilise UTF-16 en interne. Si vous avez un fichier texte ou CSV, début de la chaîne '\ufeff", la Marque d'Ordre des Octets UTF-16BE, éditeurs de texte et sera capable de lire les caractères non-ASCII correctement.
    • bon point. Il est possible de faire un UTF-8 les données de l'URL (et mon exemple était un), mais sans doute plus facile de faire un UTF-16. Techniquement, si, JavaScript est plus proche de l'UCS-2.
    • N'a pas de données Uri ont des limitations de taille?
    • oui, au moins dans certains navigateurs (par exemple, IE 8).
    • si il y a une façon de donner une compréhensible nom à une image dont la src est une des données URI?
    • Ne fonctionne pas dans Samsung Navigateur (par Défaut navigateur mobile)
    • Juste ajouter un téléchargement="txt.csv" attribut afin d'avoir le bon fichier nom et extension et de dire à votre OS de quoi faire avec elle.
    • Et il y a une limite de taille. Il est dit que pour Chrome, la limite est de 2 mo.
    • Fonctionne comme un charme sur Chrome. base64 semble être la meilleure solution pour passer des fichiers PDF 🙂
    • À l'aide de <a> attribut download="filename.txt" et javascript .click() vous pouvez automatiser le processus.
    • Il ne fonctionne pas dans Microsoft Bord 40.15063.674.0 et Internet Explorer 11.674.15063.0. J'ai utilisé la réponse de @naren et il fonctionne.
    • Je suis en train de l'utiliser pour télécharger la valeur d'un textarea comme un fichier texte, mais les retours à la ligne dans le textarea ne figurent pas dans le fichier téléchargé fichier de texte. Des Suggestions? Voici comment je forme le href: 'data:application/octet-stream,' + encodeURIComponent(document.getElementById("editeur").valeur).replace("\n","%0A") . (J'ai ajouté la fonction remplacer en espérant que peut être le problème).
    • Ne fonctionne plus sous Firefox; haut niveau de données Uri ont été bloqués pour la "sécurité". bugzilla.mozilla.org/show_bug.cgi?id=1331351

    InformationsquelleAutor Matthew Flaschen
  2. 649

    Solution Simple pour HTML5 prêt navigateurs...

    JS:

    function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

    CSS:

    form * {
  display: block;
  margin: 10px;
}

    HTML:

    <form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

    Utilisation

    download('test.txt', 'Hello world!');
    • Yep. C'est exactement ce que @MatthewFlaschen a posté ici environ 3 ans.
    • Oui, mais avec download attribut vous pouvez spécifier le nom de fichier 😉
    • Comme @earcam l'a déjà souligné dans les commentaires ci-dessus.
    • Chrome ne fait qu'ajouter à la txt extension si vous ne fournissez pas une extension dans le nom de fichier. Si vous ne download("data.json", data) il va fonctionner comme prévu.
    • Dans google chrome, si j'utilise votre code en dehors d'une soumettre le formulaire, et nommé mon fichier *.js par exemple, google chrome me dire sa d'un malware. Une idée de comment résoudre ce problème ?
    • Même situation avec ce violon? Peut-être est-ce lié: les logiciels Malveillants et les logiciels indésirables
    • Cela permettra d'éliminer tout caractère de saut de ligne dans le texte téléchargé. Mon fichier ne contient que 1 ligne. Aucune Idée sur comment résoudre ce problème? Si je ne data:text/plain;base64 firefox de ne pas le télécharger.
    • Vous êtes à l'ouverture de ce fichier dans le bloc-notes Windows. Suis-je le droit? Essayez de Sublime Text, VSCode, Atome, Notepad++, etc. Le bloc-notes en attendant que les lignes se termine avec la séquence \n\r, mais cette méthode permet de gagner de nouvelles lignes \n seulement.
    • Je suis à l'aide de Notepad++. J'ai aussi essayé de JSON.stringify(item, undefined, "\t").replace(/\n/g, "\r\n");. Lorsque j'imprime le texte sur la console, immédiatement avant de l'insérer dans les données uri, je peux voir qu'elle contient \r\n, cependant, quand j'ouvre le fichier enregistré ceux qui sont partis. Je pense que je ferais mieux d'ouvrir une question.
    • J'ai ouvert un propre question ici: stackoverflow.com/questions/49128196/...
    • Cela a fonctionné pour moi en Chrome (73.0.3683.86) et Firefox (66.0.2). Il n' PAS travailler dans IE11 (11.379.17763.0) et Edge (44.17763.1.0).
    • Comment puis-je le faire avec un fichier jpeg ou png?

    InformationsquelleAutor Matěj Pokorný
  3. 186

    Toutes les solutions ci-dessus ne fonctionne pas dans tous les navigateurs. Voici ce que, enfin, fonctionne sur internet explorer 10+, Firefox et Chrome (et sans jQuery ou toute autre bibliothèque):

    save: function(filename, data) {
    var blob = new Blob([data], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else{
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = filename;        
        document.body.appendChild(elem);
        elem.click();        
        document.body.removeChild(elem);
    }
}

    Note que, selon votre situation, vous pouvez également appeler URL.revokeObjectURL après la suppression de elem. Selon les docs pour URL.createObjectURL:

    Chaque fois que vous appelez createObjectURL(), un nouvel objet de l'URL est créée, même si vous avez déjà créé un pour le même objet. Chacun de ces doit être publié par l'appel de l'URL.revokeObjectURL() lorsque vous n'en avez plus besoin. Les navigateurs libérer ces automatiquement lorsque le document est déchargé; cependant, pour optimiser les performances et l'utilisation de la mémoire, si il y a de sûr des moments où vous pouvez explicitement les décharger, vous devriez le faire.

    • Merci un million. J'ai essayé tous les exemples cités ici et seulement celui-ci fonctionne avec n'importe quel navigateur. Ce doit être la accepté de répondre.
    • Dans google Chrome, je n'ai pas pour ajouter l'élément à l'organisme pour obtenir que cela fonctionne.
    • Il y a une limite de taille. Pour Chrome, il est dit d'être de 2 mo. Quelqu'un a idée sur la façon de traiter avec les plus gros fichiers?
    • L'appel de window.URL.revokeObjectURL(elem.href); après la suppression de elem sur Firefox 48 résultats dans la fenêtre de téléchargement ne jamais apparaître et le téléchargement ne jamais commencer. Retrait de l'appel à revokeObjectURL() résout ce problème. Pour AngularJS 1.x des applications, je suppose que vous pouvez construire un tableau d'Url qui sont nettoyées de détruire du contrôleur.
    • Pour AngularJS 1.x des applications, vous pouvez créer un tableau d'Url qu'ils sont créés et puis les nettoyer à l' $onDestroy de la fonction du composant. C'est génial de travailler pour moi.
    • Cette combine naren la solution, avec Dzarek's gestion de l'ei.
    • Qu'est-ce que les données? est-il encodeURI(content)?
    • D'autres réponses ont conduit à Failed: network error dans google Chrome. Celui-ci fonctionne bien.
    • "Toutes les solutions ci-dessus ne fonctionne pas dans tous les navigateurs". Puisque l'ordre des réponses peuvent changer au fil du temps, il est difficile de savoir quelles réponses ont été au-dessus de la vôtre quand vous avez écrit cette. Pouvez-vous nous indiquer exactement quelles approches ne fonctionnent pas dans tous les navigateurs?
    • Cela a fonctionné pour moi en Chrome (73.0.3683.86), Firefox (66.0.2), IE11 (11.379.17763.0) et Edge (44.17763.1.0).
    • Kanchu de la solution sur le double de cette question comprend quelques petites améliorations.

    InformationsquelleAutor Ludovic Feltz
  4. 174

    Tous l'exemple ci-dessus fonctionne très bien sur chrome et IE, mais ne parviennent pas dans Firefox.
    S'il vous plaît ne considérez ajoutant un point d'ancrage pour le corps et l'enlever après cliquez sur.

    var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

//Append anchor to body.
document.body.appendChild(a);
a.click();

//Remove anchor from body
document.body.removeChild(a);
    • Cependant: il y a ouvrir un bug dans IE 10 (et j'ai encore vu 11) qui en jette "Accès refusé" sur le a.click() ligne parce qu'il pense que le blob URL est cross-origin.
    • les données uri est l'origine de la croix dans certains navigateurs. pour autant que je sais, pas seulement dans msie, mais en chrome ainsi. vous pouvez le tester en essayant d'injecter du code javascript avec les données de l'uri. Il ne sera pas en mesure d'accéder à d'autres parties du site de...
    • "Tous l'exemple ci-dessus fonctionne très bien sur chrome et IE, mais ne parviennent pas dans Firefox.". Puisque l'ordre des réponses peuvent changer au fil du temps, il est difficile de savoir quelles réponses ont été au-dessus de la vôtre quand vous avez écrit cette. Pouvez-vous nous indiquer exactement quelles approches ne fonctionnent pas dans Firefox?
    InformationsquelleAutor naren
  5. 108

    Je suis heureux à l'aide de FileSaver.js. Sa compatibilité est très bonne (IE10+ et tout le reste), et il est très simple à utiliser:

    var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");
    • Cela fonctionne très bien sur Chrome. Comment puis-je permettre à l'utilisateur d'spécifiques à l'emplacement du fichier sur le disque?
    • Wow, merci pour la facilité d'utilisation de la bibliothèque. C'est facilement la meilleure réponse, et qui se soucie des personnes utilisant HTML < 5 ces jours de toute façon?
    • Je ne suis pas sûr que vous pouvez avec ce plugin.
    • Vous voulez dire que l'emplacement de téléchargement? Ce n'est pas lié à FileSaver.js, vous devez définir la configuration de votre navigateur afin qu'il vous demande un dossier avant chaque téléchargement, ou utiliser le plutôt de nouvelles télécharger l'attribut sur <a>.
    • C'est une EXCELLENTE solution pour IE 10+ famille de navigateurs. IE ne prend pas en charge le téléchargement HTML 5 de la balise et l'autre des solutions sur cette page (et d'autres pages de discussion d'un même problème) n'étaient tout simplement pas de travail pour moi. FileSaver ftw!
    • Il ne fonctionne pas dans Samsung Navigateur 3 (navigateur par Défaut sur au moins Galaxy 6)
    • comment pouvez-vous définir l'attribut? Tout ce que je vois est un appel de fonction...
    • Je faisais allusion à <a download="...">. Je ne suis pas sûr si/comment FileSaver.js prend en charge cette.
    • Il ressemble démo recharge la page. L'histoire dans les outils de dev est mis à jour. Binaire octect semble mieux comme solution.

    InformationsquelleAutor Daniel Buckmaster
  6. 22

    La méthode suivante fonctionne dans IE11+, Firefox 25+ et google Chrome 30+:

    <a id="export" class="myButton" download="" href="#">export</a>
<script>
    function createDownloadLink(anchorSelector, str, fileName){
        if(window.navigator.msSaveOrOpenBlob) {
            var fileData = [str];
            blobObject = new Blob(fileData);
            $(anchorSelector).click(function(){
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
            });
        } else {
            var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
            $(anchorSelector).attr("download", fileName);               
            $(anchorSelector).attr("href", url);
        }
    }

    $(function () {
        var str = "hi,file";
        createDownloadLink("#export",str,"file.txt");
    });

</script>

    Le voir en Action: http://jsfiddle.net/Kg7eA/

    Firefox et Chrome en charge les données de URI pour la navigation, ce qui nous permet de créer des fichiers en accédant à des données URI, alors que IE ne prend pas en charge pour des raisons de sécurité.

    Sur l'autre main, c'est à dire a des API pour l'enregistrement d'un blob, qui peut être utilisé pour créer et télécharger des fichiers.

    • J'ai juste utilisé jquery pour joindre des événements(onclick et onready) et de définir des attributs, vous pouvez aussi le faire avec de la vanille JS. La partie centrale(fenêtre.navigator.msSaveOrOpenBlob) n'a pas besoin de jquery.
    • Il y a encore de la limitation de taille pour les données uri approche, n'est-ce pas?
    InformationsquelleAutor dinesh ygv
  7. 12

    Cette solution est extraite directement à partir de tiddlywiki (la tiddlywiki.com) dépôt github. J'ai utilisé tiddlywiki dans presque tous les navigateurs, et il fonctionne comme un charme:

    function(filename,text){
    //Set up the link
    var link = document.createElement("a");
    link.setAttribute("target","_blank");
    if(Blob !== undefined) {
        var blob = new Blob([text], {type: "text/plain"});
        link.setAttribute("href", URL.createObjectURL(blob));
    } else {
        link.setAttribute("href","data:text/plain," + encodeURIComponent(text));
    }
    link.setAttribute("download",filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

    Dépôt Github:
    Télécharger l'économiseur d'module

    • Il fonctionne très bien sur Chrome, mais pas sous Firefox. Elle permet de faire un fichier et le télécharge, mais le fichier est vide. Pas de contenu. Des idées pourquoi? Ne l'ai pas testé sur IE...
    • sauf que la fonction n'a pas de nom, c'est mon préféré
    InformationsquelleAutor Danielo515
  8. 10

    Solution que de travailler sur IE10:
    (J'ai besoin d'un fichier csv, mais il suffit de changer le type et le nom du fichier txt)

    var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")
    • Ludovic réponse de comprend cette grande, plus la prise en charge pour les autres navigateurs.
    InformationsquelleAutor Dzarek
  9. 9

    Si vous voulez convertir une chaîne de caractères à être disponible pour le téléchargement vous pouvez essayer ce à l'aide de jQuery.

    $('a.download').attr('href', 'data:application/csv;charset=utf-8,' + encodeURI(data));
    InformationsquelleAutor Rick
  10. 7
    var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();
    • Quelles sont les différences entre cette approche et la création d'un Blob?
    InformationsquelleAutor MANVENDRA LODHI
  11. 7

    Comme mentionné avant, filesaver est un grand paquet pour travailler avec des fichiers sur le côté client. Mais, il n'est pas bien avec de gros fichiers. StreamSaver.js est une solution alternative (qui est pointé dans FileServer.js) qui peut gérer de gros fichiers:

    const fileStream = streamSaver.createWriteStream('filename.txt', size);
const writer = fileStream.getWriter();
for(var i = 0; i < 100; i++){
    var uint8array = new TextEncoder("utf-8").encode("Plain Text");
    writer.write(uint8array);
}
writer.close()
    • Encodeur de texte est très expérimental pour l'instant, je vous conseille d'éviter (ou de polyfills destinés à la prise) il.
    • Voici le tableau de couverture - caniuse.com/#feat=textencoder
    InformationsquelleAutor Mostafa
  12. 5

    En avril 2014, FileSytem Api peut ne pas être normalisé par le W3C. Toute personne à la recherche à la solution avec de blob devrait fil avec précaution, je suppose.

    HTML5 rocks heads up

    W3C Liste de Diffusion sur FileSytem API

    InformationsquelleAutor pravin
  13. 5

    Basé sur @Rick réponse qui a été vraiment utile.

    Vous avez à scape la chaîne data si vous voulez partager de cette façon:

    $('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

    `
    Désolé je ne peux pas commenter sur @la réponse de Rick à cause de mon faible réputation dans StackOverflow.

    Un edit suggestion a été partagé et rejeté.

    • Je n'étais pas en mesure d'accepter la suggestion. Étrange... j'ai mis à jour le code.
    InformationsquelleAutor atfornes
  14. 5

    Le paquet js-téléchargement de fichier de github.com/kennethjiang/js-file-download poignées de bord de cas pour la prise en charge du navigateur:

    L'affichage de la source de voir comment il utilise les techniques mentionnées sur cette page.

    Installation

    yarn add js-file-download
npm install --save js-file-download

    Utilisation

    import fileDownload from 'js-file-download'

//fileDownload(data, filename, mime)
//mime is optional

fileDownload(data, 'filename.csv', 'text/csv')
    • Merci - viens de tester avec Firefox, Chrome et Edge sur Windows
    InformationsquelleAutor Beau Smith
  15. 3

    Vous pouvez même faire mieux que juste d'URI - à l'aide de Chrome, vous êtes également en mesure de suggérer le nom du fichier, comme expliqué dans ce billet de blog à propos de nommage de téléchargement lors de l'utilisation d'URIs.

    InformationsquelleAutor owencm
  16. 1

    En-dessous de la fonction travaillé.

     private createDownloadableCsvFile(fileName, content) {
   let link = document.createElement("a");
   link.download = fileName;
   link.href = `data:application/octet-stream,${content}`;
   return link;
 }
    InformationsquelleAutor NguyenHuuGiap
  17. 0

    Pour moi cela a fonctionné parfaitement, avec le même nom de fichier et l'extension de l'obtention téléchargé

    <a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>

    "titre" est le nom de fichier avec l'extension je.e, sample.pdf, waterfall.jpg, etc..

    'file64' est le base64 content de quelque chose comme cela, je.e, Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

    InformationsquelleAutor abdul
  18. -19

    Si le fichier contient des données de texte, une technique que j'utilise est de mettre le texte dans un textarea élément et demandez à l'utilisateur de sélectionner (cliquer dans le textarea puis ctrl-A), puis les copier suivie par un coller dans un éditeur de texte.

    • J'ai pensé à cela, mais à partir d'une convivialité point, c'est désastreux. Aussi, le fichier doit être enregistré avec l'extension CSV. Essayez de le faire croire à vos utilisateurs.
    InformationsquelleAutor HBP
  19. -36

    Il EST réellement possible - utiliser le Flash.

    Vous pouvez soit générer du contenu avec JS et ensuite initialiser certains flash vars ou tout simplement faire le tout dans une animation flash.

    Veuillez jeter un oeil à cette pour quelques remarques importantes.

    • Veuillez également prendre un coup d'oeil à ce fil: stackoverflow.com/questions/1811736/...
    • J'aurais du précisé dans ma question, mais je suis à la recherche d'une solution native. Sinon je pourrais utiliser ActiveX (bien que ça ne marchera que dans IE).
    • Je crois que cette fonctionnalité est intentionnellement bloqué
    • Depuis, l'utilisateur est invité à le télécharger ou pas, je ne vois pas pourquoi il devrait intentionnellement bloqué. Aussi, à partir d'un point de vue sécurité, ce ne devrait pas être différente de celle d'un régulier de téléchargement HTTP. Au moins autant que je sache...
    • À partir d'un point de vue sécurité, le JavaScript est à la fois faible et puissant. Je veux dire, c'est tellement facile de remplacer n'importe quelle méthode que si c'était possible de le faire, on pourrait facilement se retrouver avec le téléchargement de la même virus de toute une clique dans un navigateur. C'est pourquoi le Javascript est limité dans l'interaction avec le système de fichiers à télécharger, des ruisseaux.
    • Voici une solution de contournement pour IE qui n'utilise pas de flash, mais nécessite un composant côté serveur: github.com/suprememoocow/databounce.
    • Flash n'est pas pris en charge sur mobile

    InformationsquelleAutor Mr.RoyDiibs