371 Stimmen

Toji avatar

HTML5/JavaScript verwenden, um eine Datei zu erzeugen und zu speichern

Gefragt el 24 de Kann, 2010
Wann wurde die Frage gestellt
466454 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

Ich habe in letzter Zeit mit WebGL herumgespielt und einen Collada-Reader zum Laufen gebracht. Das Problem ist, dass es ziemlich langsam ist (Collada ist ein sehr ausführliches Format), also werde ich anfangen, Dateien in ein einfacheres Format zu konvertieren (wahrscheinlich JSON). Ich habe bereits den Code, um die Datei in JavaScript zu parsen, also kann ich ihn auch als meinen Exporter verwenden! Das Problem ist das Speichern.

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

Und um das klarzustellen: Ich versuche nicht, ohne Wissen des Benutzers auf das Dateisystem zuzugreifen! Der Benutzer gibt eine Datei an (wahrscheinlich per Drag & Drop), das Skript wandelt die Datei im Speicher um, und der Benutzer wird aufgefordert, das Ergebnis herunterzuladen. All dies sollten "sichere" Aktivitäten sein, soweit der Browser betroffen ist.

[EDIT]: Ich habe es nicht im Voraus erwähnt, also sind die Poster, die mit "Flash" geantwortet haben, berechtigt, aber ein Teil dessen, was ich tue, ist ein Versuch, hervorzuheben, was mit reinem HTML5 gemacht werden kann... also ist Flash in meinem Fall ausgeschlossen. (Obwohl es eine vollkommen gültige Antwort für jeden ist, der eine "echte" Webanwendung macht.) Da dies der Fall ist, sieht es so aus, als hätte ich kein Glück, es sei denn, ich möchte den Server einbeziehen. Trotzdem vielen Dank!

Gefragt el 24 de Kann, 2010 von Toji

Antworten

Zu viele Anzeigen?

9voto

maikel avatar
maikel Punkte 1459

Ich habe zwei einfache Methoden gefunden, die bei mir funktionieren. Erstens, die Verwendung eines bereits angeklickten a Element und die Einspeisung der Download-Daten. Und zweitens, die Generierung eines a Element mit den Download-Daten und führt a.click() und wieder entfernen. Der zweite Ansatz funktioniert aber nur, wenn er auch durch eine Klick-Aktion des Benutzers aufgerufen wird. (Einige) Browser-Block click() aus anderen Kontexten, z. B. beim Laden oder nach einem Timeout (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>
Beantwortet el 16 de Marsch, 2014 von maikel (1459 Punkte )

6voto

Dennkster avatar
Dennkster Punkte 2001

Hier ist ein Link zu den Daten URI-Methode Mathew vorgeschlagen, es funktionierte auf Safari, aber nicht gut, weil ich nicht den Dateityp einstellen konnte, es wird als "unbekannt" gespeichert und dann muss ich es später wieder gehen und ändern, um die Datei zu sehen ...

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

Beantwortet el 14 de September, 2010 von Dennkster (2001 Punkte )

4voto

Kevin avatar
Kevin Punkte 2479

Wie bereits erwähnt, ist die Datei API, zusammen mit dem FileWriter et FileSystem APIs können verwendet werden, um Dateien auf dem Rechner eines Kunden aus dem Kontext einer Browser-Registerkarte/eines Fensters heraus zu speichern.

Allerdings gibt es bei den beiden letztgenannten APIs einige Dinge, die Sie beachten sollten:

  • Implementierungen der APIs gibt es derzeit nur in Chromium-basierten Browsern (Chrome & Opera)
  • Beide APIs wurden am 24. April 2014 aus dem W3C-Standardisierungsprozess herausgenommen und sind ab sofort proprietär.
  • Die Entfernung der (jetzt proprietären) APIs aus den implementierenden Browsern in der Zukunft ist eine Möglichkeit
  • A Sandkasten (ein Speicherort auf der Festplatte, außerhalb dessen Dateien keine Wirkung entfalten können) wird verwendet, um die mit den APIs erstellten Dateien zu speichern
  • A virtuelles Dateisystem (eine Verzeichnisstruktur, die auf der Festplatte nicht unbedingt in der gleichen Form existiert wie beim Zugriff über den Browser) wird für die Dateien verwendet, die mit den APIs

Im Folgenden finden Sie einfache Beispiele dafür, wie die APIs direkt und indirekt zu diesem Zweck eingesetzt werden:

BakedGoods *

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

Verwendung der Raw File-, 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 zu den Standards gehören, kann ihre Verwendung meiner Meinung nach in einigen Fällen gerechtfertigt sein, denn:

  • Das erneute Interesse der nicht implementierenden Browser-Anbieter könnte sie wieder auf den Plan rufen
  • Die Marktdurchdringung von implementierten (Chromium-basierten) Browsern ist hoch
  • Google (der Hauptbeitragszahler zu Chromium) hat kein Enddatum für die APIs angegeben

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

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

Beantwortet el 7 de Juli, 2016 von Kevin (2479 Punkte )

4voto

Jeanine avatar
Jeanine Punkte 73

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

Ich arbeite gerade an HTML5-Beispielen. Gehe zu http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html und scrollen Sie zu dem Labyrinth. Die Informationen zum Wiederaufbau des Labyrinths werden mit localStorage gespeichert.

Ich kam zu diesem Artikel auf der Suche nach HTML5-JavaScript für das Laden und Arbeiten mit Xml-Dateien. Ist es das gleiche wie ältere html und JavaScript????

Beantwortet el 1 de Juni, 2010 von Jeanine (73 Punkte )

4voto

User avatar
User Punkte 107

Sie können damit Text und andere Daten speichern:

function downloadFile(name, data) {
    let a = document.createElement("a");
    if (typeof a.download !== "undefined") a.download = name;
    a.href = URL.createObjectURL(new Blob([data], {
        type: "application/octet-stream"
    }));
    a.dispatchEvent(new MouseEvent("click"));
}

Diese Funktion erstellt eine Verankerungselement setzen Sie den Namen über .herunterladen ( falls unterstützt ), eine Url zuweisen ( .href ), die aus einem Objekt ( URL.createObjectURL ), in diesem Fall ein Blob Objekt, und senden Sie ein Klick-Ereignis. Kurz gesagt: Es ist so, als ob Sie auf einen Download-Link klicken würden.

Beispiel-Code

downloadFile("textfile.txt", "A simple text file");
downloadFile(
    "circle.svg",
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="42" />
    </svg>`
);
downloadFile(
    "utf8string.txt",
    new Uint8Array([85, 84, 70, 45, 56, 32, 115, 116, 114, 105, 110, 103]) // "UTF-8 string"
);

Diese Funktion akzeptiert auch Datei , Blob et MediaSource :

function downloadFile(name, data) {
    if (!(data instanceof File || data instanceof Blob || data instanceof MediaSource)) {
        return downloadFile(name, new Blob([data], {
            type: "application/octet-stream"
        }));
    }

    let a = document.createElement("a");
    if (typeof a.download !== "undefined") a.download = name;
    a.href = URL.createObjectURL(data);
    a.dispatchEvent(new MouseEvent("click"));
}

Oder Sie könnten zwei Funktionen verwenden:

function downloadFile(name, data) {
    return downloadObject(new Blob([data], {
        type: "application/octet-stream"
    }));
}

function downloadObject(name, object) {
    let a = document.createElement("a");
    if (typeof a.download !== "undefined") a.download = name;
    a.href = URL.createObjectURL(object);
    a.dispatchEvent(new MouseEvent("click"));
}
Beantwortet el 5 de April, 2022 von User (107 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X