Das HTML5-`<a>`-Tag kann das `download`-Attribut verwenden, um den Download einer Ressource festzulegen, aber es muss same-origin sein. Wenn der Browser es parsen kann, wird es direkt geöffnet.

In diesem Fall können wir die Drittanbieter-Bibliothek download verwenden, um eine vollständigere Download-Funktionalität zu implementieren.

Ressourcen zu download.js:

Die download.js-Bibliothek bietet eine Funktion `download()` zum Herunterladen von Dateien.

Der Download-Inhalt kann eine URL, ein String, ein Blob oder ein typisiertes Datenarray sein oder eine dataURL, die die Dateidaten als base64- oder URL-kodierten String darstellt.

Unabhängig vom Eingabeformat verwendet `download()` den angegebenen Dateinamen und die MIME-Informationen, um die Datei auf dieselbe Weise zu speichern wie ein Server, der den HTTP-Header Content-Disposition verwendet.

download(data, strFileName, strMimeType);
  • data – Der herunterzuladende Dateninhalt; kann Blob, File, String oder dataURL sein.
  • strFileName – Der Name der zu erstellenden Datei.
  • strMimeType - Der MIME-Inhaltstyp der herunterzuladenden Datei.

Beispiele

Text

Speichern Sie die Zeichenkette in einer dlText.txt-Datei und laden Sie sie herunter:

download("hello world", "dlText.txt", "text/plain");

dataURL-Textbeispiel:

download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain");

Blob-Textbeispiel:

download(new Blob(["hello world"]), "dlTextBlob.txt", "text/plain");

URL-Beispiel:

download("/robots.txt");

UInt8-Textarray-Beispiel:

var str= "hello world",    arr= new Uint8Array(str.length);
str.split("").forEach(function(a,b){
  arr[b]=a.charCodeAt();
});

download( arr, "textUInt8Array.txt", "text/plain" );

HTML

HTML-String-Beispiel:
download(document.documentElement.outerHTML, "dlHTML.html", "text/html");

HTML-Blob-Beispiel:

download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");

AJAX-Callback-Beispiel:

$.ajax({
        url: "/download.html",
        success: download.bind(true, "text/html", "dlAjaxCallback.html")
});

Binärdateien

Bild-URL:

download("/diff6.png");

Bild asynchron herunterladen:

var x=new XMLHttpRequest();
x.open( "GET", "/diff6.png" , true);
x.responseType="blob";
x.onload= function(e){download(e.target.response, "awesomesauce.png", "image/png");};
x.send();