Osadź dane bajtów PDF w HTML

Question

To powinno działać, ale wydaje mi się, że czegoś mi brakuje.

Mam plik pdf na dysku lokalnym. Oczywiście Chrome i inne przeglądarki nie mogą uzyskać tego lokalnego adresu URL, ponieważ jest on piaskownicą, więc serwlet pobiera dane z lokalnego dysku i wysyła je z powrotem przez wywołanie ajax do klienta WWW. Nie dostaję żadnych błędów i wygląda na to, że przeglądarka plików PDF ładuje się, ale sam plik się nie wyświetli. Koduję to z wyprzedzeniem, ale nadal nie będzie działać. Poniżej przedstawię moje liczne podejścia, ale nie będę podawał kodu serwletu, ponieważ wydaje się, że działa.

Próba 1:

function embedFile(){ 
    $.get("FileGetter", function(pdfText){ 

     var base64EncodedPDF = b64EncodeUnicode(pdfText); 
     $("#embedHolder").append("<object id='embedder' width='80%' height='600px'><embed width=100% height=100%" 
            + ' type="application/pdf"' 
            + ' src="data:application/pdf;base64,' 
            + base64EncodedPDF 
            + "></embed></object>"); 

      }); 
     } 

function b64EncodeUnicode(str) { 
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) { 
       return String.fromCharCode('0x' + p1); 
      })); 
     } 

Próba 2:

function embedFile(){ 
    $.get("FileGetter", function(pdfText){ 

     var base64EncodedPDF = b64EncodeUnicode(pdfText); 
     var obj = $('<object id="repObjID" type="application/pdf" width="100%" height="600" border="2"></object>'); 
     obj.attr('data',base64EncodedPDF); 
     var embed = $('<embed type="application/pdf"></embed>'); 
     embed.attr('src',base64EncodedPDF); 
     $('#repObjID').append(embed); 
     $("#docHolder").html(obj); 
    } 

function b64EncodeUnicode(str) { 
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,    function(match, p1) { 
       return String.fromCharCode('0x' + p1); 
      })); 
}  

Answer 1

1. Pobierz dane binarne z AJAX, w produkt arraybuffer

var xhr = new XMLHttpRequest; 
xhr.open('get', '/path/to/pdf, true); 
xhr.responseType = 'arraybuffer'; 
xhr.send(); 

2. Tworzenie Adres URL obiektu typu blob i obiekt

var blob = new Blob([xhr.response], {type: 'application/pdf'}); 
var url = URL.createObjectURL(blob); 

3. Obciążenie URL w iframe

iframe.src = url; 

Demo: https://webblocks.nl/tests/ajax-pdf.html