JavaScript: créer et enregistrer un fichier

j'ai des données que je veux écrire dans un fichier, et d'ouvrir une boîte de dialogue de fichier pour l'utilisateur de choisir où enregistrer le fichier. Il serait grand si elle a fonctionné dans tous les navigateurs, mais il doit fonctionner dans Chrome. Je veux faire ça du côté des clients.

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

saveFile: function(data)
{
}

où la fonction prend dans les données, a l'utilisateur choisissent un endroit pour sauver le dossier, et crée un dossier dans cet endroit avec cela données.

utiliser HTML est très bien aussi, si cela aide.

175
demandé sur Donald Duck 2012-11-15 23:56:09

10 réponses

une amélioration très mineure du code par Awesomeness01 (pas besoin d'étiquette d'ancrage) avec ajout comme suggéré par trueimage (support pour IE): 

// Function to download data to a file
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

testé pour fonctionner correctement dans Chrome, FireFox et IE10.

dans Safari, les données sont ouvertes dans un nouvel onglet et il faudrait enregistrer manuellement ce fichier.

134
répondu Kanchu 2017-05-23 10:31:31

ce projet sur github semble prometteur:

https://github.com/eligrey/FileSaver.js

FileSaver.js implémente L'interface W3C saveAs() FileSaver les navigateurs qui ne supporte pas nativement.

regardez aussi la démo ici:

http://eligrey.com/demos/FileSaver.js /

115
répondu lostsource 2012-11-15 20:05:49 

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.txt', 'text/plain')">Create file</button>

et vous téléchargez alors le fichier en mettant l'attribut download sur l'étiquette d'ancrage.

la raison pour laquelle j'aime mieux cela que de créer une url de données est que vous n'avez pas à créer une url longue, vous pouvez juste générer une url temporaire.

98
répondu Awesomeness01 2015-04-11 22:57:53

choisir l'emplacement pour sauvegarder le fichier avant de le créer n'est pas possible. Mais il est possible, au moins dans Chrome, de générer des fichiers en utilisant JavaScript. Voici un vieil exemple de moi de créer un fichier CSV. L'utilisateur sera invité à le télécharger. Cela, malheureusement, ne fonctionne pas bien dans d'autres navigateurs, en particulier IE. 

<!DOCTYPE html>
<html>
<head>
    <title>JS CSV</title>
</head>
<body>
    <button id="b">export to CSV</button>
    <script type="text/javascript">
        function exportToCsv() {
            var myCsv = "Col1,Col2,Col3\nval1,val2,val3";

            window.open('data:text/csv;charset=utf-8,' + escape(myCsv));
        }

        var button = document.getElementById('b');
        button.addEventListener('click', exportToCsv);
    </script>
</body>
</html>
37
répondu Matt Greer 2012-11-15 20:08:19 

setTimeout("create('Hello world!', 'myfile.txt', 'text/plain')");
function create(text, name, type) {
  var dlbtn = document.getElementById("dlbtn");
  var file = new Blob([text], {type: type});
  dlbtn.href = URL.createObjectURL(file);
  dlbtn.download = name;
}
<a href="javascript:void(0)" id="dlbtn"><button>click here to download your file</button></a>
16
répondu Samuel Tees 2017-02-25 17:34:09

pour le dernier navigateur, comme Chrome, vous pouvez utiliser L'API de fichier comme dans ce tutoriel : 

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler);
14
répondu pdjota 2012-11-15 20:05:34

a essayé 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));
8
répondu Netsi1964 2015-06-01 10:24:23

vous ne pouvez pas faire cela purement en Javascript. Javascript tournant sur les navigateurs n'a pas encore assez de permission (Il y a eu des propositions) pour des raisons de sécurité.

à la place, je recommande l'utilisation de télécharger :

une minuscule bibliothèque javascript + Flash qui permet la création et le téléchargement de fichiers texte sans interaction avec le serveur.

vous pouvez voir un simple Démo ici où vous fournissez le contenu et pouvez tester la fonctionnalité de sauvegarde/annulation/traitement des erreurs.

6
répondu Aamir Mansoor 2013-12-09 02:22:09

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

2
répondu Alok 2014-12-20 06:22:07

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

(mon application ne peut pas utiliser un paquet tel que Blob.js car il est servi à partir d'un moteur spécial: un DSP avec un serveur WWWeb entassé 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 la belette-les mots:

  • j'ai eu du succès avec ce code à la fois dans les clients Chrome et Firefox en cours d'exécution Environnements Linux (Maipo) et Windows (7 et 10).
  • cependant, si sourceText est plus grand qu'un MB, Chrome se bloque parfois (seulement parfois) dans son propre téléchargement sans aucune indication de défaillance; Firefox, jusqu'à présent, n'a pas montré ce comportement. La cause pourrait être une certaine limitation blob dans Chrome. Franchement, je ne sais pas; si quelqu'un a des idées comment corriger (ou au moins détecter), s'il vous plaît poster. Si l'anomalie de téléchargement se produit, lorsque le navigateur Chrome est fermé, il génère un diagnostic tels que Chrome browser diagnostic
  • ce code n'est pas compatible avec Edge ou Internet Explorer; Je n'ai pas essayé Opera ou Safari.
2
répondu user1601638 2018-02-22 01:28:47