Heim >Web-Frontend >js-Tutorial >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:
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:
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!