Wie kann ich Blob-Dateinamen beim direkten Herunterladen in JavaScript anpassen?

Anpassen des Blob-Dateinamens für direkte Downloads in JavaScript

Einführung

Bei Verwendung von window.location Um das Herunterladen einer Blob-Datei in JavaScript zu erzwingen, wird der Name der heruntergeladenen Datei automatisch generiert. Um diesen Dateinamen anzupassen, sind zusätzliche Schritte erforderlich.

Lösung mit FileSaver.js-Trick

Eine Problemumgehung besteht darin, eine Technik zu verwenden, die der von FileSaver.js verwendeten ähnelt:

1. Erstellen Sie ein verstecktes Tag.
2. Weisen Sie die URL des Blobs dem href-Attribut zu.
3. Legen Sie den gewünschten Dateinamen mithilfe des Download-Attributs fest.
4. Initiieren Sie den Download, indem Sie auf das Symbol klicken. tag.

Vereinfachtes Beispiel

function saveData(data, fileName) {
  var json = JSON.stringify(data),
      blob = new Blob([json], {type: "octet/stream"}),
      url = window.URL.createObjectURL(blob);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  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);

Verwendung von FileSaver.js

Während die obige Methode dies kann funktioniert, wird empfohlen, die robustere FileSaver.js-Bibliothek zum Speichern von Dateien zu verwenden JavaScript:

import { saveAs } from 'file-saver';

var json = JSON.stringify(data),
    filename = "my-download.json";

var blob = new Blob([json], {type: "octet/stream"});
saveAs(blob, filename);

Überlegungen

• Ältere Browser unterstützen das Download-Attribut möglicherweise nicht, da es sich um eine HTML5-Funktion handelt.
• Sicher Dateiformate gelten möglicherweise als unsicher und blockieren den Download. Das Speichern von JSON-Dateien mit der Erweiterung .txt kann dieses Problem beheben.

Das obige ist der detaillierte Inhalt vonWie kann ich Blob-Dateinamen beim direkten Herunterladen in JavaScript anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!