Prawidłowe tworzenie i przesyłanie blobów PDF za pośrednictwem plików HTML5 i interfejsów URL API

Question

Ok, powiedzmy, że mam gdzieś zapisane dane dokumentu, zróbmy arbitralnie this pdf.

Problem # 1. Co chcę zrobić, to wywołanie AJAX do tego adresu URL (ponieważ muszę przekazać niektóre nagłówki uwierzytelniania i jest to domena krzyżowa). Następnie odbierz zwrócone dane, utwórz dla nich blob url, dołącz element iFrame do DOM i skieruj src na adres URL blob.

Obecnie mój kod wygląda następująco:

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

Niestety, ja dostaję 'Nie udało się Render PDF' w iFrame.

Problem # 2. Chciałbym, aby to spowodowało monit o pobranie pliku. Nie wiesz, jak to zagwarantować, ponieważ pliki PDF będą wyświetlane w ramce iFrame.

Answer 1

jQuery.ajax obecnie nie obsługuje obiektów typu blob, zobacz ten bug report #7248, który jest zamknięty jako wontfix.

Jednak jest to łatwe do zrobienia XHR dla bąble bez 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(); 

Bezwstydnie skopiowane z HTML5rocks.

Jeśli jQuery nie obsługuje typu Blob, to może być tak proste, jak:

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