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

Pour les derniers navigateurs, comme Chrome, vous pouvez utiliser l'option API de fichier comme dans ce tutoriel :

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler);

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

Pour Chrome et Firefox, j'ai utilisé une méthode purement JavaScript.

(Mon application ne peut pas faire usage d'un paquet tel que Blob.js parce qu'il est servi à partir d'un moteur spécial : un DSP avec un serveur WWWeb fourré dedans et peu de place pour quoi que ce soit).

function FileSave(sourceText, fileIdentity) {
    var workElement = document.createElement("a");
    if ('download' in workElement) {
        workElement.href = "data:" + 'text/plain' + "charset=utf-8," + escape(sourceText);
        workElement.setAttribute("download", fileIdentity);
        document.body.appendChild(workElement);
        var eventMouse = document.createEvent("MouseEvents");
        eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        workElement.dispatchEvent(eventMouse);
        document.body.removeChild(workElement);
    } else throw 'File saving not supported for this browser';
}

Notes, mises en garde et mots croisés :

• J'ai eu du succès avec ce code dans les clients Chrome et Firefox fonctionnant dans des environnements Linux (Maipo) et Windows (7 et 10).
• Toutefois, si sourceText est supérieure à un Mo, Chrome reste parfois (seulement parfois) bloqué dans son propre téléchargement sans aucune indication d'échec ; Firefox, jusqu'à présent, n'a pas présenté ce comportement. La cause pourrait être une limitation des blobs dans Chrome. Franchement, je n'en sais rien ; si quelqu'un a une idée de la façon de corriger (ou au moins de détecter) ce problème, merci de la poster. Si l'anomalie de téléchargement se produit, lorsque le navigateur Chrome est fermé, il génère un diagnostic tel que
• Ce code n'est pas compatible avec Edge ou Internet Explorer ; je n'ai pas essayé Opera ou Safari.