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中加载网址

iframe.src = url;

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

在HTML中嵌入PDF字节数据

1 个答案: