So laden Sie Daten-URLs in JavaScript herunter: Eine Chrome- und Firefox-Lösung?

Herunterladen von Daten-URLs in JavaScript

Beim Versuch, ein JavaScript-basiertes Zip-/Unzip-Dienstprogramm zu erstellen, ist ein Problem mit aufgetreten Herunterladen von Dateien, die in Daten-URLs codiert sind. Während dieser Ansatz in Firefox funktioniert, schlägt er in Chrome fehl.

Chromes Dilemma

Chrome unterstützt das direkte Herunterladen von Daten-URLs nicht. Stattdessen werden sie als Bilder eingebettet, wenn sie mithilfe von img-Tags referenziert werden. Dies stellt ein Problem für Nicht-Bilddateiformate dar.

Eine Problemumgehung

Glücklicherweise gibt es eine Problemumgehung, um das Herunterladen von Daten-URLs sowohl in Chrome als auch in Firefox zu ermöglichen. Die Lösung besteht darin, ein temporäres a-Element zu erstellen, dessen Download-Attribut auf den gewünschten Dateinamen zu setzen und die Daten-URL seinem href-Attribut zuzuweisen.

Codebeispiel

Das Folgende Die JavaScript-Funktion downloadURI implementiert dies Problemumgehung:

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

Verwendung

Um diese Funktion zu verwenden, geben Sie die Daten-URL und den gewünschten Download-Dateinamen als Argumente an:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

Bei diesem Ansatz wird sowohl in Chrome als auch in Firefox ein Download-Dialogfeld angezeigt, in dem Benutzer die Datei unter dem angegebenen Dateinamen speichern können.

Das obige ist der detaillierte Inhalt vonSo laden Sie Daten-URLs in JavaScript herunter: Eine Chrome- und Firefox-Lösung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!