在HTML中嵌入PDF字节数据

Question

这应该有效,但似乎我遗漏了一些东西.

我在本地驱动器上有一个pdf文件.显然,因为它的沙盒Chrome和其他浏览器无法获得本地URL,所以我有一个servlet从本地驱动器把数据发送回通过Ajax调用Web客户端.我没有收到任何错误,似乎正在加载pdf查看器,但文件本身不会显示.我提前编码,但它仍然无法正常工作.我将在下面展示我的众多方法,但我不会包含servlet代码,因为它似乎正在工作.

尝试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.使用ajax将二进制数据下载到arraybuffer中

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

2. 创建 Blob 和对象 URL

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

3. 在 iframe 中加载 URL

iframe.src = url;

演示： https: //webblocks.nl/tests/ajax-pdf.html