PDFバイトデータをHTMLに埋め込む

Question

これはうまくいくはずですが、何か不足しているようです。

ローカルドライブにpdfファイルがあります。明らかにChromeや他のブラウザはサンドボックス化されているので、ローカルURLを取得できません。そのため、ローカルドライブからデータを取得し、Webクライアントへのajax呼び出しによってサーブレットに戻すサーブレットがあります。私はどんなエラーも出ませんし、pdfビューアがロードされているようですが、ファイル自体は表示されません。私はそれを前もってエンコードしていますが、それでも動作しません。以下に私の多くのアプローチを示しますが、サーブレットコードは含まれていません。

試み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); 
      })); 
     } 

試み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.作成arraybuffer

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

2に、AjaxでバイナリデータをダウンロードBLOBとオブジェクトのURL iframe内に

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

3.ロードURL

iframe.src = url; 

デモ：https://webblocks.nl/tests/ajax-pdf.html