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
Freigeben: 2024-12-13 18:46:10
Original
737 Leute haben es durchsucht

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);
}
Nach dem Login kopieren

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";
Nach dem Login kopieren
  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";
Nach dem Login kopieren
  1. Lösen Sie den Download aus, indem Sie auf das Symbol klicken. tag:
a.click();
Nach dem Login kopieren
  1. Widerrufen Sie die URL des Blobs, um zu verhindern, dass erneut darauf zugegriffen wird:
window.URL.revokeObjectURL(url);
Nach dem Login kopieren

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);
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage