Ich habe in letzter Zeit mit WebGL herumgespielt und einen Collada-Leser zum Laufen gebracht. Das Problem ist, dass es ziemlich langsam ist (Collada ist ein sehr ausführliches Format), daher werde ich anfangen, Dateien in ein einfacher zu verwendendes Format (wahrscheinlich JSON) zu konvertieren. Ich habe bereits den Code zum Parsen der Datei in JavaScript, daher kann ich ihn auch als Exporteur verwenden! Das Problem ist das Speichern.

Jetzt weiß ich, dass ich die Datei analysieren, das Ergebnis an den Server senden und vom Browser die Datei als Download vom Server zurückfordern lassen kann. In Wirklichkeit hat der Server jedoch nichts mit diesem bestimmten Prozess zu tun. Warum sollte er also beteiligt werden? Ich habe bereits den Inhalt der gewünschten Datei im Speicher. Gibt es eine Möglichkeit, dem Benutzer einen Download mit reinem JavaScript zu präsentieren? (Ich bezweifle es, könnte aber genauso gut fragen ...)

Und um klar zu sein: Ich versuche nicht, ohne Wissen des Benutzers auf das Dateisystem zuzugreifen! Der Benutzer stellt eine Datei bereit (wahrscheinlich per Drag & Drop), das Skript transformiert die Datei im Speicher und der Benutzer wird aufgefordert, das Ergebnis herunterzuladen. All dies sollten für den Browser "sichere" Aktivitäten sein.

[BEARBEITEN]: Ich habe es nicht im Voraus erwähnt, daher sind die Poster, die mit "Flash" geantwortet haben, gültig genug, aber ein Teil meiner Arbeit besteht darin, hervorzuheben, was mit reinem HTML5 möglich ist ... also ist Flash direkt in meinem Fall. (Obwohl dies eine absolut gültige Antwort für jeden ist, der eine "echte" Web-App erstellt.) In diesem Fall habe ich anscheinend kein Glück, es sei denn, ich möchte den Server einbeziehen. Danke trotzdem!

OK, Daten erstellen: URI macht definitiv den Trick für mich, dank Matthew und Dennkster, die auf diese Option hinweisen! Hier ist im Grunde, wie ich es mache:

1) Holen Sie sich den gesamten Inhalt in eine Zeichenfolge namens "Inhalt" (z. B. indem Sie ihn zunächst dort erstellen oder innerHTML des Tags einer bereits erstellten Seite lesen).

2) Erstellen Sie den Daten-URI:

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

Abhängig vom Browsertyp usw. gibt es Längenbeschränkungen, aber z. B. funktioniert Firefox 3.6.12 bis mindestens 256 KB. Das Codieren in Base64 anstelle von encodeURIComponent könnte die Dinge effizienter machen, aber für mich war das in Ordnung.

3) Öffnen Sie ein neues Fenster und leiten Sie es zu diesem URI um. Sie werden aufgefordert, einen Download-Speicherort für meine von JavaScript generierte Seite einzugeben:

newWindow = window.open(uriContent, 'neuesDokument');

Das ist es.

Einfache Lösung für HTML5-fähige Browser ...

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

Verwendungszweck

download('test.txt', 'Hello world!');

HTML5 hat eine window.saveAs(blob, filename)Methode definiert . Es wird derzeit von keinem Browser unterstützt. Es gibt jedoch eine Kompatibilitätsbibliothek namens FileSaver.js , die diese Funktion den meisten modernen Browsern (einschließlich Internet Explorer 10+) hinzufügt. Internet Explorer 10 unterstützt eine navigator.msSaveBlob(blob, filename)Methode ( MSDN ), die in FileSaver.js für die Unterstützung von Internet Explorer verwendet wird.

Ich habe einen Blogeintrag mit weiteren Details zu diesem Problem geschrieben.

Große Dateien speichern

Lange Daten-URIs können in Browsern zu Leistungsproblemen führen. Eine weitere Option zum Speichern clientseitig generierter Dateien besteht darin, deren Inhalt in ein Blob- (oder Datei-) Objekt einzufügen und mithilfe einen Download-Link zu erstellen URL.createObjectURL(blob). Dies gibt eine URL zurück, mit der der Inhalt des Blobs abgerufen werden kann. Der Blob wird im Browser gespeichert, bis entweder URL.revokeObjectURL()die URL aufgerufen wird oder das Dokument, das ihn erstellt hat, geschlossen wird. Die meisten Webbrowser unterstützen Objekt-URLs . Opera Mini ist der einzige, der sie nicht unterstützt.

Download erzwingen

Wenn es sich bei den Daten um Text oder ein Bild handelt, kann der Browser die Datei öffnen, anstatt sie auf der Festplatte zu speichern. Um zu bewirken, dass die Datei beim Klicken auf den Link heruntergeladen wird, können Sie das downloadAttribut verwenden. Allerdings unterstützen nicht alle Webbrowser das Download-Attribut . Eine andere Option ist die Verwendung application/octet-streamals MIME-Typ der Datei. Dies führt jedoch dazu, dass die Datei als binärer Blob dargestellt wird. Dies ist besonders benutzerunfreundlich, wenn Sie keinen Dateinamen angeben oder nicht angeben können. Siehe auch Popup ' Öffnen unter "Speichern unter ...", das beim Klicken auf einen Textlink geöffnet wird. Klicken Sie für PDF in HTML. '

Angeben eines Dateinamens

Wenn der Blob mit dem Dateikonstruktor erstellt wird, können Sie auch einen Dateinamen festlegen, aber nur wenige Webbrowser (einschließlich Chrome und Firefox) unterstützen den Dateikonstruktor . Der Dateiname kann auch als Argument für das downloadAttribut angegeben werden, dies unterliegt jedoch einer Reihe von Sicherheitsaspekten . Internet Explorer 10 und 11 bieten eine eigene Methode, msSaveBlob , um einen Dateinamen anzugeben.

Beispielcode

var file;
var data = [];
data.push("This is a test\n");
data.push("Of creating a file\n");
data.push("In a browser\n");
var properties = {type: 'text/plain'}; // Specify the file's mime-type.
try {
  // Specify the filename using the File constructor, but ...
  file = new File(data, "file.txt", properties);
} catch (e) {
  // ... fall back to the Blob constructor if that isn't supported.
  file = new Blob(data, properties);
}
var url = URL.createObjectURL(file);
document.getElementById('link').href = url;

<a id="link" target="_blank" download="file.txt">Download</a>

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

Schauen Sie sich dazu Doug Neiners Downloadify an , eine Flash-basierte JavaScript-Oberfläche.

Downloadify ist eine winzige JavaScript + Flash-Bibliothek, die das Generieren und Speichern von Dateien im laufenden Betrieb im Browser ohne Serverinteraktion ermöglicht.

Einfache Lösung!

<a download="My-FileName.txt" href="data:application/octet-stream,HELLO-WORLDDDDDDDD">Click here</a>

Funktioniert in allen modernen Browsern.

Sie können einen Daten-URI generieren . Es gibt jedoch browserspezifische Einschränkungen.

Ich habe FileSaver ( https://github.com/eligrey/FileSaver.js ) verwendet und es funktioniert einwandfrei .
Zum Beispiel habe ich diese Funktion ausgeführt, um auf einer Seite angezeigte Protokolle zu exportieren.
Sie müssen ein Array für die Instanziierung des Blobs übergeben, also habe ich das vielleicht nicht richtig geschrieben, aber es funktioniert für mich.
Nur für den Fall, seien Sie vorsichtig mit dem Ersetzen: Dies ist die Syntax, um dies global zu machen, andernfalls wird nur die erste ersetzt, die er trifft.

exportLogs : function(){
    var array = new Array();

    var str = $('#logs').html();
    array[0] = str.replace(/<br>/g, '\n\t');

    var blob = new Blob(array, {type: "text/plain;charset=utf-8"});
    saveAs(blob, "example.log");
}

Ich habe zwei einfache Ansätze gefunden, die für mich funktionieren. Verwenden Sie zunächst ein bereits angeklicktes aElement und fügen Sie die Download-Daten ein. Und zweitens: Generieren eines aElements mit den Download-Daten, Ausführen a.click()und erneutes Entfernen. Der zweite Ansatz funktioniert jedoch nur, wenn er auch von einer Benutzerklickaktion aufgerufen wird. (Einige) Browser blockieren click()aus anderen Kontexten wie beim Laden oder werden nach einem Timeout ausgelöst (setTimeout).

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>

Hier ist ein Link zu der Daten-URI-Methode, die Mathew vorgeschlagen hat. Sie hat auf Safari funktioniert, aber nicht gut, da ich den Dateityp nicht festlegen konnte. Sie wird als "unbekannt" gespeichert. Dann muss ich später erneut dorthin gehen und die Reihenfolge ändern um die Datei anzuzeigen ...

http://www.nihilogic.dk/labs/canvas2image/

Sie können localStorage verwenden. Dies ist das HTML5-Äquivalent von Cookies. Es scheint unter Chrome und Firefox zu funktionieren, ABER unter Firefox musste ich es auf einen Server hochladen. Das heißt, das Testen direkt auf meinem Heimcomputer hat nicht funktioniert.

Ich arbeite an HTML5-Beispielen. Gehen Sie zu http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html und scrollen Sie zum Labyrinth. Die Informationen zum Wiederherstellen des Labyrinths werden mithilfe von localStorage gespeichert.

Ich bin zu diesem Artikel gekommen und habe nach HTML5-JavaScript zum Laden und Arbeiten mit XML-Dateien gesucht. Ist es das gleiche wie älteres HTML und JavaScript ????

Versuchen

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent('"My DATA"');
a.download = 'myFile.json';
a.click(); // we not add 'a' to DOM so no need to remove

Wenn Sie Binärdaten herunterladen möchten, klicken Sie hier

Aktualisieren

2020.06.14 Ich aktualisiere Chrome auf 83.0 und höher. SO-Snippet-Stopp funktioniert (aufgrund von Sandbox-Sicherheitsbeschränkungen ) - aber die JSFiddle-Version funktioniert hier

Wie bereits erwähnt, können die Datei- API zusammen mit den FileWriter- und FileSystem- APIs verwendet werden, um Dateien auf dem Computer eines Clients über den Kontext einer Browser-Registerkarte / eines Browser-Fensters zu speichern.

Es gibt jedoch einige Dinge im Zusammenhang mit den beiden letztgenannten APIs, die Sie beachten sollten:

• Implementierungen der APIs sind derzeit nur in Chromium-basierten Browsern (Chrome & Opera) vorhanden.
• Beide APIs wurden am 24. April 2014 vom W3C-Standard-Track entfernt und sind ab sofort proprietär
• Das Entfernen der (jetzt proprietären) APIs aus zukünftigen Implementierungsbrowsern ist möglich
• Eine Sandbox (ein Speicherort auf der Festplatte, außerhalb dessen Dateien keine Auswirkungen haben können) wird zum Speichern der mit den APIs erstellten Dateien verwendet
• Ein virtuelles Dateisystem (eine Verzeichnisstruktur, die nicht unbedingt in derselben Form auf der Festplatte vorhanden ist wie beim Zugriff über den Browser) repräsentiert die mit den APIs erstellten Dateien

Hier sind einfache Beispiele dafür, wie die APIs direkt und indirekt zusammen verwendet werden, um dies zu tun:

BakedGoods *

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

Verwenden der Rohdatei-, FileWriter- und FileSystem-APIs

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

Obwohl die FileSystem- und FileWriter-APIs nicht mehr auf der Standardspur sind, kann ihre Verwendung meiner Meinung nach in einigen Fällen gerechtfertigt sein, weil:

• Erneutes Interesse der nicht implementierenden Browser-Anbieter kann sie direkt wieder darauf setzen
• Die Marktdurchdringung bei der Implementierung von (Chromium-basierten) Browsern ist hoch
• Google (der Hauptverursacher von Chromium) hat den APIs kein Datum für das Ende der Lebensdauer angegeben

Ob "einige Fälle" Ihre eigenen umfassen, müssen Sie jedoch selbst entscheiden.

* BakedGoods wird von niemand anderem als diesem Kerl hier gepflegt :)

Dieser Thread war von unschätzbarem Wert, um herauszufinden, wie eine Binärdatei generiert und die benannte Datei heruntergeladen werden kann, alles im Client-Code ohne Server.

Der erste Schritt für mich war das Generieren des binären Blobs aus Daten, die ich gespeichert habe. Es gibt viele Beispiele dafür für einen einzelnen Binärtyp. In meinem Fall habe ich ein Binärformat mit mehreren Typen, die Sie als Array übergeben können, um den Blob zu erstellen.

saveAnimation: function() {

    var device = this.Device;
    var maxRow = ChromaAnimation.getMaxRow(device);
    var maxColumn = ChromaAnimation.getMaxColumn(device);
    var frames = this.Frames;
    var frameCount = frames.length;

    var writeArrays = [];


    var writeArray = new Uint32Array(1);
    var version = 1;
    writeArray[0] = version;
    writeArrays.push(writeArray.buffer);
    //console.log('version:', version);


    var writeArray = new Uint8Array(1);
    var deviceType = this.DeviceType;
    writeArray[0] = deviceType;
    writeArrays.push(writeArray.buffer);
    //console.log('deviceType:', deviceType);


    var writeArray = new Uint8Array(1);
    writeArray[0] = device;
    writeArrays.push(writeArray.buffer);
    //console.log('device:', device);


    var writeArray = new Uint32Array(1);
    writeArray[0] = frameCount;
    writeArrays.push(writeArray.buffer);
    //console.log('frameCount:', frameCount);

    for (var index = 0; index < frameCount; ++index) {

      var frame = frames[index];

      var writeArray = new Float32Array(1);
      var duration = frame.Duration;
      if (duration < 0.033) {
        duration = 0.033;
      }
      writeArray[0] = duration;
      writeArrays.push(writeArray.buffer);

      //console.log('Frame', index, 'duration', duration);

      var writeArray = new Uint32Array(maxRow * maxColumn);
      for (var i = 0; i < maxRow; ++i) {
        for (var j = 0; j < maxColumn; ++j) {
          var color = frame.Colors[i][j];
          writeArray[i * maxColumn + j] = color;
        }
      }
      writeArrays.push(writeArray.buffer);
    }

    var blob = new Blob(writeArrays, {type: 'application/octet-stream'});

    return blob;
}

Der nächste Schritt besteht darin, den Browser zu veranlassen, den Benutzer aufzufordern, diesen Blob mit einem vordefinierten Namen herunterzuladen.

Ich brauchte nur einen benannten Link, den ich in HTML5 hinzugefügt hatte und den ich wiederverwenden konnte, um den ursprünglichen Dateinamen umzubenennen. Ich habe es versteckt gehalten, da der Link nicht angezeigt werden muss.

<a id="lnkDownload" style="display: none" download="client.chroma" href="" target="_blank"></a>

Der letzte Schritt besteht darin, den Benutzer zum Herunterladen der Datei aufzufordern.

var data = animation.saveAnimation();
var uriContent = URL.createObjectURL(data);
var lnkDownload = document.getElementById('lnkDownload');
lnkDownload.download = 'theDefaultFileName.extension';
lnkDownload.href = uriContent;
lnkDownload.click();

Hier ist ein Tutorial zum Exportieren von Dateien als ZIP:

Bevor Sie beginnen, gibt es eine Bibliothek zum Speichern von Dateien. Der Name der Bibliothek lautet fileSaver.js. Diese Bibliothek finden Sie hier. Beginnen wir jetzt mit den erforderlichen Bibliotheken:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

Kopieren Sie nun diesen Code und dieser Code lädt eine Zip-Datei mit einer Datei hello.txt mit Inhalt Hello World herunter. Wenn alles gut funktioniert, wird eine Datei heruntergeladen.

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

Dadurch wird eine Datei namens file.zip heruntergeladen. Weitere Informationen finden Sie hier: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library