javascript - localstorage - sessionstorage jquery




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

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?


Basé sur @Rick réponse qui était vraiment utile.

Vous devez scaper les data chaîne si vous souhaitez le 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 @ Rick en raison de ma faible réputation actuelle dans .

Une suggestion d'édition a été partagée et rejetée.


C'est en fait possible - utilisez Flash.

Vous pouvez soit générer le contenu avec JS, puis initialiser certaines vars flash ou tout faire dans un film flash.

S'il vous plaît jeter un oeil à this pour quelques remarques importantes.


Comme mentionné à propos de filesaver est un paquet de grille pour travailler avec les fichiers du côté client. Mais, ce n'est pas bon de traiter de gros fichiers. StreamSaver.js est une solution alternative (qui est pointée dans FileServer.js) pour gérer les 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()


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 l'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.


Si le fichier contient des données textuelles, une technique que j'utilise est de placer le texte dans un élément textarea et de le faire sélectionner par l'utilisateur (cliquer dans textarea puis ctrl-A) puis copier suivi d'un collage dans un éditeur de texte.


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

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

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 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 supprimé elem . Selon les documents 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.



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




client-side