Creare e servire correttamente Blob PDF tramite API file e URL HTML5

Question

Ok, supponiamo di avere i dati del documento memorizzati da qualche parte, prendiamo arbitrariamente lo this pdf.

numero 1. Quello che voglio fare è fare una chiamata AJAX a questo URL (perché ho bisogno di passare alcune intestazioni di autenticazione ed è cross domain). Quindi prendi i dati restituiti, crea un blob url, aggiungi un iFrame al DOM e indirizza il src all'URL blob.

Attualmente il mio codice simile a questo:

$.ajax({ 
    url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf' 
}).done(function(data){ 
    var file = new Blob([data], {type:'application/pdf'}), 
     url = URL.createObjectURL(file), 
     _iFrame = document.createElement('iframe'); 
     _iFrame.setAttribute('src', url); 
     _iFrame.setAttribute('style', 'visibility:hidden;'); 
     $('#someDiv').append(_iFrame); 
}); 

Purtroppo, io sono sempre un 'Impossibile rendering PDF' nel iFrame.

numero 2. Mi piacerebbe che questo risultasse in un prompt di download del file. Non sei sicuro di come garantire questo dato che i PDF saranno naturalmente visualizzati solo nell'iFrame.

Answer 1

jQuery.ajax attualmente non supporta BLOB, vedere questo bug report #7248 che viene chiuso come wontfix.

tuttavia è facile da fare XHR per blob senza jQuery:

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf', true); 
xhr.responseType = 'blob'; 

xhr.onload = function(e) { 
    if (this.status == 200) { 
    // Note: .response instead of .responseText 
    var blob = new Blob([this.response], {type: 'application/pdf'}), 
     url = URL.createObjectURL(blob), 
     _iFrame = document.createElement('iframe'); 

    _iFrame.setAttribute('src', url); 
    _iFrame.setAttribute('style', 'visibility:hidden;'); 
    $('#someDiv').append(_iFrame)   
    } 
}; 

xhr.send(); 

spudoratamente copiato da HTML5rocks.

Se jQuery ha fatto supportare il tipo di Blob, potrebbe essere semplice come:

$.ajax({ 
    url:'http://www.grida.no/climate/ipcc_tar/wg1/pdf/tar-01.pdf', 
    dataType:'blob' 
})...