JavaScript : Créer et enregistrer un fichier

Question

J'ai des données que je veux écrire dans un fichier, et ouvrir une boîte de dialogue de fichier pour que l'utilisateur puisse choisir où enregistrer le fichier. Ce serait génial si cela fonctionnait dans tous les navigateurs, mais il faut que cela fonctionne dans Chrome. Je veux faire tout cela côté client.

En gros, je veux savoir ce qu'il faut mettre dans cette fonction :

saveFile: function(data)
{
}

La fonction prend des données, demande à l'utilisateur de sélectionner un emplacement pour enregistrer le fichier et crée un fichier à cet emplacement avec ces données.

L'utilisation du langage HTML convient également, si cela peut vous aider.

Answer 1

StreamSaver est une alternative pour sauvegarder des fichiers très volumineux sans avoir à conserver toutes les données en mémoire.
En fait, il émule tout ce que le serveur dose lors de l'enregistrement d'un fichier mais tout cela côté client avec le service worker.

Vous pouvez soit récupérer le scripteur et y écrire manuellement des tableaux Uint8Array, soit faire passer un readableStream binaire dans le flux inscriptible.

Il y a quelques exemple la mise en valeur :

• Comment enregistrer plusieurs fichiers sous forme de zip
• canalisation d'un readableStream à partir de eg Response ou blob.stream() à StreamSaver
• écrire manuellement dans le flux inscriptible lorsque vous tapez quelque chose.
• ou le recodage d'une vidéo/audio

Voici un exemple dans sa forme la plus simple :

const fileStream = streamSaver.createWriteStream('filename.txt')

new Response('StreamSaver is awesome').body
  .pipeTo(fileStream)
  .then(success, error)

Si vous souhaitez enregistrer un blob, il vous suffit de le convertir en un readableStream.

new Response(blob).body.pipeTo(...) // response hack
blob.stream().pipeTo(...) // feature reference

Answer 2

Javascript possède une API de système de fichiers. Si vous pouvez accepter que la fonctionnalité ne fonctionne que dans Chrome, un bon point de départ serait le suivant : http://www.html5rocks.com/en/tutorials/file/filesystem/ .