So legen Sie Anforderungsheader fest, bevor es in einem iframe geladen wird

Question

Ich muss eine Datei herunterladen, die 'Content-Disposition' Header von Server auf "attachment" festgelegt wird. Ich benutze jQuery.ajax für GET und bei erfolgreicher Einstellung versteckt iframesrc zu url, die mir ein Pop-up für den Dateidownload gibt. Und es funktioniert in allen Browsern. Jetzt möchte ich eine benutzerdefinierte Anfrage Header zu verschlüsseln Datei vor GET & Download ändern. Ich habe jQuery.ajax vor-Anfrage Rückruf-Funktion beforeSend dafür verwendet.

Ich bin in der Lage, meine verschlüsselte Datei, die ich in Firebug beobachten kann, aber meine iframe zeigt immer noch nicht verschlüsselte Datei zum Download. Nach der Inspektion kann ich sagen, dass iframe ein neues GET anfordern.

-Code

$.ajax({ 
url: "/tutorial.text", 
beforeSend: function(xhr) { xhr.setRequestHeader("PASSWORD_HEADER", userPwd); }, 
success: function() { $("#Hidden_iframe").attr("src", this.url); }         
}); 

Und das funktioniert gut auf Internet Explorer. Wie kann ich iframe zwingen, die verfügbare Ressource zu verwenden, anstatt ein neues GET anzufordern. Oder wie kann ich setRequestHeader in Iframe oder brauche ich wirklich eine jQuery.Ajax für diese Aufgabe gibt es die beste Möglichkeit zum Download der Content-Disposition-Header zu Anlage Dateien direkt vom Server festgelegt ist.

Answer 1

Diese Lösung verwendet kein iframe oder Formular. Es verwendet XHR mit benutzerdefinierten Header auf einer Ressource, die CORS unterstützt (nur zufälliges svg aus dem Internet für dieses Beispiel). Die wichtigsten Unterschiede bei diesem Ansatz ist xhr.responseType = 'arraybuffer'; und eine Verbindung mit blob href und download Attribute:

jsfiddle

// some initial data 
 
var url = '//enable-cors.org/img/cloud-download.svg'; 
 
var password = '123456'; 
 

 
// download url into arrayBuffer 
 
function download (url, password, cb) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', url, true); 
 
    xhr.responseType = 'arraybuffer'; 
 
    // xhr.setRequestHeader('PASSWORD_HEADER', password); 
 
    xhr.onload = function() { 
 
     cb(xhr.response); 
 
    }; 
 
    xhr.send(null); 
 
} 
 

 
// receive binary content of url 
 
// create blob link and click on it 
 
download(url, password, function (arrayBuffer) { 
 
    var file = new File([arrayBuffer], 'some filename'); 
 
    var a = document.createElement('A'); 
 
    a.setAttribute('href', window.URL.createObjectURL(file)); 
 
    a.setAttribute('download', 'file-name-of-download.ext'); 
 
    // in firefox `a.click()` works only if `a` element is in DOM, so... 
 
    document.documentElement.appendChild(a); 
 
    a.click(); 
 
    console.log('done'); 
 
});

in Chrome57 und FF54 getestet.