İçe Aktarıcılar bir iframe'e yüklenmeden önce istekleri ayarlama

Question

Sunucu tarafından "Content-Disposition" başlığının "attachment" olarak ayarlandığı bir dosyayı indirmem gerekiyor.için jQuery.ajax kullanıyorum ve iframesrc gizliliğinin url'a ayarlı olarak ayarlanmasını sağlıyorum, bu da bana dosya indirme için bir pop-up veriyor. Ve tüm tarayıcılarda iyi çalışıyor. Şimdi, GET & indirmeden önce dosyayı şifrelemek için özel istek başlıklarını değiştirmek istiyorum. Bunun için jQuery.ajax istek öncesi geri arama işlevi beforeSend kullanılır.

Firebug'da gözlemleyebileceğim şifrelenmiş dosyama GET yapabiliyorum ancak iframe hala şifrelenmemiş bir dosyayı indirmeye devam ediyor. Teftişten sonra iframe'un yeni bir GET talep ettiğini söyleyebilirim.

Kod

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

Ve bu internet kaşif iyi çalışıyor. Iframe'yi yeni GET istemek yerine mevcut kaynağı kullanma konusunda nasıl zorlayabilirim. Veya iframe içinde setRequestHeader set veya bu görev için gerçekten bir jQuery.Ajax ihtiyacım var Doğrudan bir sunucudan ek dosyalar olarak ayarlanan Content-Disposition üstbilgisini indirmenin en iyi yolu var.

Answer 1

Bu çözüm iframe veya form kullanmaz. CORS'i destekleyen bir kaynak üzerinde özel başlıklı XHR kullanır (bu örnek için sadece internetten rastgele svg). Bu yaklaşımda önemli farklar xhr.responseType = 'arraybuffer'; ve blob href ve download özelliklere sahip bir link:

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'); 
 
});

Chrome57 ve FF54 içinde test edilmiştir.