Créer un fichier en mémoire à télécharger par l'utilisateur, et non par le serveur

y a-t-il un moyen de créer un fichier texte du côté du client et d'inviter l'utilisateur à le télécharger, sans aucune interaction avec le serveur? Je sais que je ne peux pas écrire directement sur leur machine (Sécurité et tout), mais puis-je créer et les inciter à la sauvegarder?

657
demandé sur Joseph Silber 2010-09-08 10:24:18
la source

16 ответов

vous pouvez utiliser L'URIs de données. La prise en charge du navigateur varie; voir Wikipedia . Exemple:

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

l'octet-stream doit forcer une invite de téléchargement. Sinon, il s'ouvrira probablement dans le navigateur.

pour CSV, vous pouvez utiliser:

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

Essayez le jsFiddle démo .

364
répondu Matthew Flaschen 2016-06-08 11:10:02
la source

la solution la plus Simple pour HTML5 prêt navigateurs...

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);
}
form * {
  display: block;
  margin: 10px;
}
<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!');
553
répondu Matěj Pokorný 2015-06-30 23:08:51
la source

tous les exemples ci-dessus fonctionnent très bien dans chrome et IE, mais échouent dans Firefox. Veuillez envisager d'ajouter une ancre au corps et de la retirer après avoir cliqué.

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);
158
répondu naren 2017-09-18 19:11:24
la source

toutes les solutions ci-dessus ne fonctionnaient pas dans tous les navigateurs. Voici ce qui fonctionne finalement sur IE 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);
    }
}

notez que, selon votre situation, vous pouvez aussi appeler L'URL .revokeObjectURL après suppression de elem . Selon les docs pour L'URL .createObjectURL :

chacun lorsque vous appelez createObjectURL (), une nouvelle URL d'objet est créée, même si vous en avez déjà créé une pour le même objet. Chacun de ceux-ci doit être publié en appelant URL.revokeObjectURL () quand vous n'en avez plus besoin. Les navigateurs les libèrent automatiquement lorsque le document est déchargé; cependant, pour une performance et une utilisation de la mémoire optimales, s'il y a des temps sûrs où vous pouvez les décharger explicitement, vous devriez le faire.

146
répondu Ludovic Feltz 2016-08-12 18:20:01
la source

je suis heureux d'utiliser FileSaver.js . Sa compatibilité est assez 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");
102
répondu Daniel Buckmaster 2013-05-09 03:05:25
la source

la méthode suivante fonctionne dans IE11+, Firefox 25+ et 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>

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

Firefox et Chrome prennent en charge L'URI de données pour la navigation, ce qui nous permet de créer des fichiers en naviguant vers un URI de données, alors QU'IE ne le prend pas en charge à des fins de sécurité.

D'un autre côté, IE a API pour sauvegarder un blob, qui peut être utilisé pour créer et de téléchargement de fichiers.

19
répondu dinesh ygv 2013-12-27 10:55:52
la source

Solution qui fonctionne 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")
8
répondu Dzarek 2014-07-27 13:10:59
la source

cette solution est extraite directement de tidlywiki (tiddlywiki.com) GitHub repository. 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

8
répondu Danielo515 2015-07-15 21:52:36
la source

si vous voulez juste convertir une chaîne de caractères pour être disponible en téléchargement, Vous pouvez essayer cela en utilisant jQuery.

$('a.download').attr('href', 'data:application/csv;charset=utf-8,' + encodeURI(data));
8
répondu Rick 2017-08-16 19:41:32
la source
var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();
5
répondu MANVENDRA LODHI 2015-05-09 14:55:37
la source

en date d'avril 2014, FileSytem APIs peut ne pas être standardisé dans le W3C. Quiconque regarde la solution avec blob devrait filmer avec prudence, je suppose.

HTML5 rocks têtes

liste de diffusion W3C sur L'API FileSytem

4
répondu pravin 2015-01-20 18:47:54
la source

basé sur la réponse de @Rick qui a été très utile.

vous devez scape la chaîne de caractères data si vous voulez la partager de cette façon:

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

` Désolé, Je ne peux pas commenter la réponse de @Rick en raison de ma mauvaise réputation actuelle dans StackOverflow.

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

4
répondu atfornes 2015-09-07 17:59:01
la source

comme mentionné ci-dessus, filesaver est un excellent paquet pour travailler avec des fichiers côté client. Mais ce n'est pas bien avec les gros fichiers. StreamSaver.js est une solution alternative (qui est pointée dans FileServer.js) qui peut traiter de grands 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()
4
répondu مصطفی 2018-08-16 23:42:42
la source

vous pouvez même faire mieux que juste URI's - en utilisant Chrome vous êtes également en mesure de suggérer le nom que le fichier va prendre, comme expliqué dans ce billet de blog sur le nom d'un téléchargement lors de l'utilisation D'URIs .

3
répondu owencm 2013-04-07 01:08:22
la source

si le fichier contient des données textuelles, une technique que j'utilise est de mettre le texte dans un élément textarea et de demander à l'utilisateur de le sélectionner (cliquer sur textarea puis ctrl-A) puis de copier suivi d'un coller dans un éditeur de texte.

-19
répondu HBP 2010-09-08 10:51:27
la source

il est en fait possible - utiliser Flash.

vous pouvez soit générer le contenu avec JS et ensuite initialiser certains vars flash ou tout simplement faire tout dans un film flash.

s'il vous Plaît prendre un coup d'oeil à ce pour quelques remarques importantes.

-30
répondu Mr.RoyDiibs 2010-09-08 10:51:21
la source