web-dev-qa-db-fra.com

Comment générer et inviter à enregistrer un fichier à partir du contenu dans le navigateur client?

J'ai une situation où je dois donner à mes utilisateurs la possibilité d'enregistrer certaines données stockées localement dans leur mémoire client sur le disque. La solution de contournement actuelle que j'ai est d'avoir un gestionnaire comme celui-ci

(define-handler (download-deck) ((deck :json))
  (setf (header-out :content-type) "application/json"
    (header-out :content-disposition) "attachment")
  deck)

qui fait exactement ce à quoi il ressemble. Le client envoie ses données et enregistre le fichier renvoyé localement.

Cela semble stupide.

S'il vous plaît, s'il vous plaît dites-moi qu'il existe un meilleur moyen, plus simple et multi-navigateur pour permettre à un client d'enregistrer des données locales sur son disque avec une boîte de dialogue d'enregistrement de fichier.

Chaque réponse que j'ai lue sur le sujet dit "non, vous ne pouvez pas enregistrer de fichiers avec javascript" ou "oui, il y a cette seule pièce semi-documentée de l'API Chrome Chrome qui pourrait vous permettre de faire en trois pages ".

javascriptfilesavedownload
24
Inaimathi

Cette bibliothèque "FileSaver" peut vous aider . Si vous voulez qu'il soit raisonnablement multi-navigateur, vous aurez également besoin de this pour implémenter l'API Blob W3C dans des endroits où il n'est pas déjà implémenté. Les deux respectent les espaces de noms et sont complètement indépendants du cadre, ne vous inquiétez donc pas des problèmes de dénomination.

Une fois que vous les avez inclus, et tant que vous n'enregistrez que des fichiers texte, vous devriez pouvoir

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

Notez que le premier argument de new Blob doit être une liste de chaînes et vous devez spécifier le nom du fichier. Comme dans, l'utilisateur verra ce fichier être téléchargé localement, mais ne pourra pas le nommer lui-même. J'espère qu'ils utilisent un navigateur qui gère les collisions de noms de fichiers locaux ...

30
Dave

Voici mon code:

<a id='tfa_src_data'>Export</a>

document.getElementById('tfa_src_data').onclick = function() {                  
                        var csv = JSON.stringify(localStorage['savedCoords']);
                        var csvData = 'data:application/csv;charset=utf-8,' 
                                       + encodeURIComponent(csv);
                        this.href = csvData;
                        this.target = '_blank';
                        this.download = 'filename.txt';
                    };

Vous pouvez utiliser différents types de données.

13
tomasb

Selon ce que vous essayez de faire exactement, le concept de stockage local HTML5 peut vous aider.

Qu'est-ce que le stockage HTML5? Autrement dit, c'est un moyen pour les pages Web de stocker des paires clé/valeur nommées localement, dans le navigateur Web client. Comme les cookies, ces données persistent même après que vous vous éloignez du site Web, fermez l'onglet de votre navigateur, quittez votre navigateur ou tout ce que vous avez. Contrairement aux cookies, ces données ne sont jamais transmises au serveur Web distant (sauf si vous faites tout votre possible pour les envoyer manuellement). http://diveintohtml5.info/storage.html

Il y a aussi l'API Filesystem (jusqu'à présent uniquement implémentée dans Chrome AFAIK) http://www.html5rocks.com/en/tutorials/file/filesystem/

2
KarlM