Erstellen und speichern Sie eine Datei mit JavaScript [duplicate]

Lesezeit: 4 Minuten

Benutzer-Avatar
Benutzer1756980

Ich habe Daten, die ich in eine Datei schreiben möchte, und öffne einen Dateidialog, in dem der Benutzer auswählen kann, wo die Datei gespeichert werden soll. Es wäre großartig, wenn es in allen Browsern funktionieren würde, aber es muss in Chrome funktionieren. Ich möchte das alles clientseitig machen.

Grundsätzlich möchte ich wissen, was ich in diese Funktion einfügen soll:

saveFile: function(data)
{
}

Wenn die Funktion Daten aufnimmt, muss der Benutzer einen Ort zum Speichern der Datei auswählen und an diesem Ort eine Datei mit diesen Daten erstellen.

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

  • Seit Jahren ein exaktes Duplikat von Create a file in memory for user to download, not through server.

    – Dan Dascalescu

    7. November 2016 um 20:48 Uhr


Benutzer-Avatar
Netsi1964

Habe es in der Konsole probiert und es funktioniert.

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));

  • Das sieht nach einer sehr nützlichen Bibliothek aus. Danke !

    – lovassoa

    24. August 2019 um 20:29 Uhr

Benutzer-Avatar
Großartigkeit01

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>

Und Sie würden dann die Datei herunterladen, indem Sie das Download-Attribut auf das Anchor-Tag setzen.

Der Grund, warum mir das besser gefällt als das Erstellen einer Daten-URL, ist, dass Sie keine große lange URL erstellen müssen, sondern einfach eine temporäre URL generieren können.

  • @Banjocat Sie sollten überprüfen, ob der Browser bestimmte Objekte unterstützt. Beispiel Erkennung: if("URL"in window&&"createObjectURL"in URL&&"download"in Element.prototype): Andernfalls ändern Sie einfach die Download-Methode oder stellen fest, dass der Browser die erforderlichen Objekte zum Herunterladen der Datei nicht unterstützt.

    – Klaider

    20. Januar 2016 um 22:24 Uhr

  • In Firefox funktioniert dies, wenn Sie auf den Link klicken, aber wenn Sie mit der rechten Maustaste klicken und Link speichern unter … auswählen, passiert nichts.

    – ähm

    28. April 2018 um 5:04 Uhr


  • Funktioniert nicht in Google Chrome: Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not set. See https://www.chromestatus.com/feature/5706745674465280 for more details.

    – posfan12

    26. Dezember 2020 um 3:49 Uhr


  • @posfan12 Versuchen Sie, es auf Ihrer eigenen Seite zu implementieren, SO rendert das Code-Snippet in einem Iframe, das ohne das Allow-Downloads-Flag keine Dateien herunterladen darf.

    – Großartigkeit01

    28. Dezember 2020 um 1:54 Uhr

Benutzer-Avatar
Hafez Divandari

function SaveBlobAs(blob, file_name) {
    if (typeof navigator.msSaveBlob == "function")
        return navigator.msSaveBlob(blob, file_name);

    var saver = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    var blobURL = saver.href = URL.createObjectURL(blob), 
        body = document.body;

    saver.download = file_name;

    body.appendChild(saver);
    saver.dispatchEvent(new MouseEvent("click"));
    body.removeChild(saver);
    URL.revokeObjectURL(blobURL);
}

  • @Banjocat Sie sollten überprüfen, ob der Browser bestimmte Objekte unterstützt. Beispiel Erkennung: if("URL"in window&&"createObjectURL"in URL&&"download"in Element.prototype): Andernfalls ändern Sie einfach die Download-Methode oder stellen fest, dass der Browser die erforderlichen Objekte zum Herunterladen der Datei nicht unterstützt.

    – Klaider

    20. Januar 2016 um 22:24 Uhr

  • In Firefox funktioniert dies, wenn Sie auf den Link klicken, aber wenn Sie mit der rechten Maustaste klicken und Link speichern unter … auswählen, passiert nichts.

    – ähm

    28. April 2018 um 5:04 Uhr


  • Funktioniert nicht in Google Chrome: Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not set. See https://www.chromestatus.com/feature/5706745674465280 for more details.

    – posfan12

    26. Dezember 2020 um 3:49 Uhr


  • @posfan12 Versuchen Sie, es auf Ihrer eigenen Seite zu implementieren, SO rendert das Code-Snippet in einem Iframe, das ohne das Allow-Downloads-Flag keine Dateien herunterladen darf.

    – Großartigkeit01

    28. Dezember 2020 um 1:54 Uhr

Benutzer-Avatar
Samuel Liew

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

Ich denke, das kann auch mit JSON-Dateien funktionieren, wenn Sie den Mime-Typ ändern.

1010870cookie-checkErstellen und speichern Sie eine Datei mit JavaScript [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy