Wie lege ich einen benutzerdefinierten Dateinamen für Blob-Downloads in JavaScript fest?

Benutzerdefinierten Blob-Dateinamen in JavaScript festlegen

Bei der Arbeit mit Blobs in JavaScript kann es vorkommen, dass Sie einen benutzerdefinierten Namen angeben müssen Dateinamen anstelle des standardmäßig zufällig generierten Namens. Dies ist besonders nützlich, wenn Sie für Downloads oder Datenexporte einen aussagekräftigen Dateinamen angeben möchten.

Problem: Zuweisen eines benutzerdefinierten Blob-Dateinamens

Der folgende Codeausschnitt erstellt einen blob und versucht, es über window.location herunterzuladen, aber die heruntergeladene Datei hat einen zufälligen Namen wie "bfefe410-8d9c-4883-86c5-d76c50a24a1d":

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

Lösung: Verwendung des A-Tag-Tricks

Die einzige bekannte Methode, um einen benutzerdefinierten Dateinamen zuzuweisen zu einem Blob in JavaScript erfordert einen Trick mit einem versteckten tag:

1. Erstellen Sie ein verstecktes Tag.
2. Setzen Sie sein href-Attribut auf die URL des Blobs.
3. Setzen Sie sein Download-Attribut auf den gewünschten Dateinamen.
4. Klicken Sie auf das Symbol Tag programmgesteuert markieren.

Beispielcode:

Das folgende Beispiel zeigt, wie Sie diesen Trick verwenden, um ein JSON-Objekt in einer Datei mit dem Namen zu speichern „my-download.json“:

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.
• Bestimmt Dateiformate werden möglicherweise vom Browser nicht unterstützt und können zu einem Download-Fehler führen. Es wurde beispielsweise beobachtet, dass das Speichern von JSON-Dateien mit der Erweiterung .txt funktioniert.

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