355 votes

JavaScript : Créer et enregistrer un fichier

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.

7 votes

3voto

We B Martians Points 197

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 Chrome browser diagnostic
  • Ce code n'est pas compatible avec Edge ou Internet Explorer ; je n'ai pas essayé Opera ou Safari.

1voto

Alok Points 134

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/ .

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X