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

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!');

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);

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.

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");

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.

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")

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

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));

var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();

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

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é.

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()

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 .

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.

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.