Wie kann ich beim Herunterladen einer Blob-Datei in JavaScript einen bestimmten Dateinamen erzwingen?-js-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-12-14 08:00:19

Original

306 Leute haben es durchsucht

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:

Erstellen Sie ein verstecktes Element.

Setzen Sie sein href-Attribut auf die URL des Blobs.

Setzen Sie sein Download-Attribut auf den gewünschten Dateinamen.

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

Nach dem Login kopieren

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!