Alle Fallback-Client-Lösungen für das HTML5-Download-Attribut?

Question

Gibt es eine clientseitige Fallback-Option für Browser, die das HTML5-Attribut "download" nicht unterstützen?

Derzeit wird dies nur in Chrome ordnungsgemäß unterstützt. Firefox hat Unterstützung, hat aber einen stumpfen Standpunkt eingenommen, dass es nur für Dateien aus der gleichen Domäne für "Sicherheitsprobleme" funktionieren sollte.

Der richtige Weg, um dies zu behandeln, ist ein Backend-Server, der angeforderte Dateien mit einem Content-Disposition-Header proxies, aber in diesem Fall ist es wahrscheinlich keine Option.

Firefox "Sicherheitstheater" ist auch nicht sehr hilfreich, da es ein beliebiger Mechanismus ist, um einen Proxy einzurichten.

Ich schaute auf https://github.com/dcneiner/Downloadify, aber nur festgestellt, dass es nur Dateierstellung, nicht Remote-Dateizugriff unterstützt.

Answer 1

Die kurze Antwort: nein. Neben dem bereits erwähnten Attribut download gibt es keine saubere clientseitige Methode. wäre die richtige Header gesendet beste, aber es ist ein Hack, die Sie wahrscheinlich nicht verwenden wollen: die

Für alle Links mit dem Attribut downloadXMLHttpRequest (Sie können solche mit document.querySelectorAll('a[download]') zu bekommen), benutzen Sie Seite/Daten unter der im HREF angegebenen URL. Verwenden Sie dann die btoa()-Funktion (oder ein Polyfill für IEs), um es in eine Base64-Zeichenfolge zu konvertieren. Fügen Sie nun am Anfang der Zeichenfolge "data:application/octet-stream;base64," hinzu und legen Sie dies als neues HREF-Attribut des Ankers fest. Entfernen Sie dann das Attribut download. (Wahrscheinlich möchten Sie zuerst die Browser-Unterstützung testen, z. B. mit Modernizr).

Ich sagte Ihnen, dass Sie es nicht mögen würden!

Answer 2

Ich schrieb diese JS [attrDownloadIE.js]

// author: Carlos Machado 
// version: 0.1 
// year: 2015 
// 
var f_name = ""; 
var f_ref = ""; 

function reqListener() { 
    if(f_name == "") {f_name = f_ref;} 
    var blobObject = this.response; 
    window.navigator.msSaveBlob(blobObject, f_name); 
} 

function myDownload(evt) { 
    f_name = this.getAttribute("download"); 
    f_ref = this.getAttribute("href"); 
    evt.preventDefault(); 
    var oReq1 = new XMLHttpRequest(); 
    oReq1.addEventListener("load",reqListener, false); 
    oReq1.open("get", this, true); 
    oReq1.responseType = 'blob'; 
    oReq1.send(); 
} 

document.addEventListener(
    "load", 
    function(event){ 
    var isIE = /*@cc_on!@*/false || !!document.documentMode; 
    if(isIE) { 
     var items = document.querySelectorAll('a[download], area[download]'); 
     for(var i = 0; i < items.length; i++) { 
     items[i].addEventListener('click', myDownload, false); 
     } 
    } 
    } 
);