Erstellen und Speichern einer Datei mit JavaScript

Question

Erstellen und Speichern einer Datei mit JavaScript

Gefragt el 15 de November, 2012: Wann wurde die Frage gestellt
960627 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Diese Frage hat bereits Antworten:

Wie kann man eine Datei im Speicher erstellen, die der Benutzer herunterladen kann, aber nicht über den Server? (22 Antworten )

Ich habe Daten, die ich in eine Datei schreiben möchte, und öffne ein Dateidialogfeld, in dem der Benutzer auswählen kann, wo er die Datei speichern möchte. Es wäre toll, wenn es in allen Browsern funktionieren würde, aber es muss in Chrome funktionieren. Ich möchte dies alles client-side tun.

Im Grunde möchte ich wissen, was ich in diese Funktion eingeben soll:

saveFile: function(data)
{
}

Die Funktion nimmt Daten auf, lässt den Benutzer einen Speicherort für die Datei auswählen und erstellt an diesem Ort eine Datei mit diesen Daten.

Die Verwendung von HTML ist auch in Ordnung, wenn das hilft.

Gefragt el 15 de November, 2012 von user1756980

Answer 1

5 Antworten

Answer 2

339voto

Kanchu Punkte 3651

Eine sehr kleine Verbesserung des Codes durch Unglaublichkeit01 (kein Anker-Tag erforderlich) mit einem Zusatz, wie er von trueimage (Unterstützung für 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); 
    }
}

Es wurde getestet, dass sie in Chrome, FireFox und IE10 ordnungsgemäß funktioniert.

In Safari werden die Daten in einem neuen Tab geöffnet und man müsste diese Datei manuell speichern.

Beantwortet el 14 de Juni, 2015 von Kanchu (3651 Punkte )

Answer 3

157voto

Awesomeness01 Punkte 2193

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>

Dann laden Sie die Datei herunter, indem Sie das Attribut download in den Anker-Tag einfügen.

Das gefällt mir besser als die Erstellung einer Datenurl, weil man keine lange Url erstellen muss, sondern einfach eine temporäre Url generieren kann.

Beantwortet el 30 de Marsch, 2015 von Awesomeness01 (2193 Punkte )

Answer 4

139voto

lostsource Punkte 20140

Dieses Projekt auf github sieht vielversprechend aus:

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

FileSaver.js implementiert die W3C saveAs() FileSaver-Schnittstelle in Browsern, die sie nicht von Haus aus unterstützen.

Werfen Sie auch einen Blick auf die Demo hier:

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

Beantwortet el 15 de November, 2012 von lostsource (20140 Punkte )

Answer 5

41voto

Matt Greer Punkte 58978

Es ist nicht möglich, den Speicherort der Datei vor der Erstellung auszuwählen. Aber es ist möglich, zumindest in Chrome, Dateien nur mit JavaScript zu erzeugen. Hier ist ein altes Beispiel von mir für die Erstellung einer CSV-Datei. Der Benutzer wird aufgefordert, die Datei herunterzuladen. In anderen Browsern, insbesondere im IE, funktioniert das leider nicht so gut.

<!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>

Beantwortet el 15 de November, 2012 von Matt Greer (58978 Punkte )

Answer 6

16voto

pdjota Punkte 3053

Bei aktuellen Browsern, wie Chrome, können Sie die Datei-API wie in diesem Lernprogramm :

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

Beantwortet el 15 de November, 2012 von pdjota (3053 Punkte )

Erstellen und Speichern einer Datei mit JavaScript

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Erstellen und Speichern einer Datei mit JavaScript

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: