Question Créer un fichier en mémoire pour l'utilisateur à télécharger, pas via le serveur


Est-il possible que je puisse créer un fichier texte sur le côté client et invite 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 les créer et les inviter à les sauvegarder?


636
2017-09-08 06:24


origine


Réponses:


Vous pouvez utiliser des URI de données. Le support du navigateur varie; voir Wikipédia. Exemple:

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

Le flux d'octets consiste à forcer une invite de téléchargement. Sinon, il s'ouvrira probablement dans le navigateur.

Pour le format CSV, vous pouvez utiliser:

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

Essaie le jsFiddle démo.


356
2017-09-08 06:29



Solution simple pour les navigateurs compatibles HTML5

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>

Usage

download('test.txt', 'Hello world!');

531
2017-08-12 21:57



Tout l'exemple ci-dessus fonctionne très bien dans Chrome et IE, mais échoue dans Firefox. S'il vous plaît, pensez à ajouter une ancre au corps et à l'enlever après un clic.

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

147
2017-11-25 13:37



Toutes les solutions ci-dessus ne fonctionnaient pas dans tous les navigateurs. Voici ce qui fonctionne enfin sur IE 10+, Firefox et Chrome (et sans pour autant 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 également appeler URL.revokeObjectURL après avoir enlevé elem. Selon les docs pour URL.createObjectURL:

Chaque fois que 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 d'entre eux doit être libéré en appelant URL.revokeObjectURL () lorsque vous n'en avez plus besoin. Les navigateurs les lâcheront automatiquement lorsque le document sera déchargé. Cependant, pour des performances optimales et l'utilisation de la mémoire, si vous pouvez les décharger explicitement, vous devez le faire.


137
2017-11-05 10:42



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

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");

97
2018-05-08 23:05



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 ceci dans Action: http://jsfiddle.net/Kg7eA/

Firefox et Chrome prennent en charge les données URI pour la navigation, ce qui nous permet de créer des fichiers en naviguant vers un URI de données, tandis que IE ne le supporte pas à des fins de sécurité.

D'autre part, IE a API pour enregistrer un blob, qui peut être utilisé pour créer et télécharger des fichiers.


18
2017-12-27 06:55



Si vous voulez juste convertir une chaîne pour qu'elle soit disponible au téléchargement, vous pouvez essayer ceci en utilisant jQuery.

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

7
2018-02-02 01:25



Solution qui fonctionne sur IE10: (J'avais besoin d'un fichier csv, mais il suffit de changer le type et le nom de fichier en 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")

6
2017-11-08 10:32