Properly Erstellen und Servieren PDF-Blob über HTML5-Datei und URL-APIs

Question

Ok, sagen wir, ich habe Dokumentdaten irgendwo gespeichert, lassen Sie uns willkürlich nehmen this pdf.

Ausgabe # 1. Ich möchte einen AJAX-Aufruf an diese URL senden (weil ich einige Authentifizierungsheader übergeben muss und es sich um eine Cross-Domain handelt). Nehmen Sie dann die zurückgegebenen Daten, erstellen Sie eine blob url dafür, hängen Sie einen iFrame an das DOM an und richten Sie die src an die Blob-URL.

Derzeit mein Code sieht wie folgt aus:

$.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); 
}); 

Leider bin ich ein 'Fehler beim Rendern PDF' in der iFrame bekommen.

Ausgabe # 2. Ich möchte, dass dies zu einer Aufforderung zum Herunterladen von Dateien führt. Ich bin mir nicht sicher, wie ich das garantieren kann, da PDFs natürlich nur im iFrame angezeigt werden.

Answer 1

jQuery.ajax unterstützt derzeit keine Blobs, siehe bug report #7248, die als Wontfix geschlossen ist.

Allerdings ist es einfach, XHR für Blobs ohne jQuery zu tun:

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(); 

Schamlos von HTML5rocks kopiert.

Wenn jQuery den Blob-Typen unterstützen tut, könnte es so einfach sein wie:

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