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

function download(text, name, type) {
  var a = document.getElementById("a");
  var file = new Blob([text], {type: type});
  a.href = URL.createObjectURL(file);
  a.download = name;
}

<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.json', 'text/json')">Create file</button>

Je pense que cela peut fonctionner avec des fichiers json aussi si vous changez le type mime.

Answer 2

function SaveBlobAs(blob, file_name) {
    if (typeof navigator.msSaveBlob == "function")
        return navigator.msSaveBlob(blob, file_name);

    var saver = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    var blobURL = saver.href = URL.createObjectURL(blob), 
        body = document.body;

    saver.download = file_name;

    body.appendChild(saver);
    saver.dispatchEvent(new MouseEvent("click"));
    body.removeChild(saver);
    URL.revokeObjectURL(blobURL);
}

Answer 3

J'ai essayé ça dans la console, et ça marche.

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
window.open(URL.createObjectURL(oMyBlob));

Answer 4

Vous ne pouvez pas faire cela uniquement en Javascript. Le Javascript exécuté sur les navigateurs n'a pas encore suffisamment d'autorisations (il y a eu des propositions) pour des raisons de sécurité.

À la place, je recommanderais d'utiliser Downloadify :

Une petite bibliothèque javascript + Flash qui permet de créer et de télécharger des fichiers texte sans interaction avec le serveur.

Vous pouvez voir une démo simple ici où vous fournissez le contenu et pouvez tester la fonctionnalité de sauvegarde/annulation/gestion des erreurs.

Answer 5

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