Heim >Web-Frontend >js-Tutorial >Wie kann ich beim Herunterladen einer Blob-Datei in JavaScript einen bestimmten Dateinamen erzwingen?

Wie kann ich beim Herunterladen einer Blob-Datei in JavaScript einen bestimmten Dateinamen erzwingen?

Susan Sarandon
Susan SarandonOriginal
2024-12-14 08:00:19304Durchsuche

How Can I Force a Specific Filename When Downloading a Blob File in JavaScript?

Einstellen des Blob-Dateinamens für erzwungene Downloads in JavaScript

Wenn Sie eine Blob-Datei direkt über window.location herunterladen, ist der Standarddateiname zufällig Zeichenfolge. Möglicherweise möchten Sie jedoch einen benutzerdefinierten Dateinamen festlegen, um ihn informativer zu gestalten.

Um dies zu erreichen, können Sie sich nicht ausschließlich auf die Methode window.location verlassen. Stattdessen müssen Sie die folgenden Schritte ausführen:

  1. Erstellen Sie ein verstecktes Element.
  2. Setzen Sie sein href-Attribut auf die URL des Blobs.
  3. Setzen Sie sein Download-Attribut auf den gewünschten Dateinamen.
  4. Lösen Sie einen Klick auf das Element.

Hier ist ein Beispiel, das den Prozess vereinfacht:

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

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

saveData(data, fileName);

Hinweise:

  • Ältere Browser unterstützen möglicherweise nicht das Download-Attribut.
  • Bestimmte Dateiformate können vom Browser eingeschränkt werden, was zu Downloadfehlern führen kann. Erwägen Sie die Verwendung einer anderen Dateierweiterung (z. B. .txt für JSON).

Das obige ist der detaillierte Inhalt vonWie kann ich beim Herunterladen einer Blob-Datei in JavaScript einen bestimmten Dateinamen erzwingen?. 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