Heim >Web-Frontend >js-Tutorial >Wie lege ich beim Herunterladen einer Blob-Datei in JavaScript einen benutzerdefinierten Dateinamen fest?

Wie lege ich beim Herunterladen einer Blob-Datei in JavaScript einen benutzerdefinierten Dateinamen fest?

Linda Hamilton
Linda HamiltonOriginal
2024-12-13 18:46:10741Durchsuche

How to Set a Custom Filename When Downloading a Blob File in JavaScript?

JavaScript: Dateinamen für Blob-Datei für direkten Download festlegen

Beim Herunterladen einer Blob-Datei in JavaScript mit window.location ist die Datei normalerweise unter einem generischen Namen gespeichert. Um einen benutzerdefinierten Dateinamen festzulegen, ist es notwendig, eine spezielle Technik anzuwenden, die das Erstellen eines versteckten Tag.

Im ursprünglichen Codebeispiel:

function newFile(data) {
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "octet/stream"});
    var url = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

Dieser Code lädt eine Datei mit dem Namen herunter:

bfefe410-8d9c-4883-86c5-d76c50a24a1d

Um den Dateinamen festzulegen als my-download.json, folgen Sie diesen Schritten:

  1. Erstellen Sie ein verstecktes markieren und an das Dokument anhängen:
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
  1. Setzen Sie das Setzen Sie das href-Attribut des Tags auf die URL des Blobs und das Download-Attribut auf den gewünschten Dateinamen:
a.href = url;
a.download = "my-download.json";
  1. Lösen Sie den Download aus, indem Sie auf das Symbol klicken. tag:
a.click();
  1. Widerrufen Sie die URL des Blobs, um zu verhindern, dass erneut darauf zugegriffen wird:
window.URL.revokeObjectURL(url);

Beispiel Implementierung:

var saveData = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

Hinweise:

  • Ältere Browser unterstützen das Download-Attribut möglicherweise nicht.
  • Einige Dateiformate ( (z. B. JSON) müssen möglicherweise aus Sicherheitsgründen mit einer anderen Erweiterung (z. B. txt) gespeichert werden Einschränkungen.
  • Erwägen Sie die Verwendung einer Bibliothek wie FileSaver.js für eine robustere und zuverlässigere Lösung.

Das obige ist der detaillierte Inhalt vonWie lege ich beim Herunterladen einer Blob-Datei in JavaScript einen benutzerdefinierten Dateinamen fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn