如何将Base64编码的PDF数据URI嵌入到HTML 5` <object>`数据属性中？

Question

所以在我的应用程序中,用户可以选择将文件上传到<input type = "file" id = "my-file">(HTML 5文件输入).我随后可以使用以下Javascript获取此文件:

var files = $("#my-file").files;
var file = files[0];

我可以以某种方式使用这个var file作为data在<object>标签？下面是一个对象标记的示例,其中通过点击URL并联系服务器来抓取PDF.

<object data="data/test.pdf" /*<-- I want the var file here */ type="application/pdf" width="300" height="200">
</object>

我怎么能做到这一点？请注意,我必须支持Internet Explorer 11.

更新:

我尝试过最终以失败告终的事情.我使用FileReader将PDF转换为数据uri,然后data在<object>标记的属性中使用它,这在Chrome中完全呈现,但在Internet Explorer中根本不呈现.

var files = $(e.currentTarget.files);
file = files[0];
var reader = new FileReader();
reader.onloadend = function() {
    var data = reader.result;
    console.log(data);
    $("#content").prepend('<object id="objPdf" data="'+data+'" type="application/pdf"></object>');
};
reader.readAsDataURL(file);

读者数据出现的地方如下:

data:application/pdf;base64,JVBERi0xLjQKJe...

以下是PDF在Internet Explorer中无法使用此方法的原因(仅限图片)...太悲了:(

更新2:

尝试了pdf.js并取得了一些成功......它在页面上显示PDF,虽然它在Internet Explorer 11中非常慢(单页为5秒).它也一次只显示一个页面,而<object>标签显示所有页面立即在一个漂亮的可滚动容器中.虽然这是一个极端的后备选择,但我不想走这条路.

任何人都有任何其他想法,我如何预览用户直接在网页上传的PDF？

Answer 1

是的，我让它与文件一起工作......

HTML：

<object id="pdf" data="" type="application/pdf"></object>

JavaScript（Jquery）

var fr = new FileReader();
fr.onload = function(evtLoaded) {
  $('#pdf').attr('data', evtLoaded.target.result );
};
fr.readAsDataURL(inFile);

与您的方法相比，我通过使用事件以不同的方式使用“我已读完文件”回调。如果我猜对了：无论读取成功还是失败，都会调用“loadend”。

2021 年 8 月 4 日附录：
@Adil 谈论 PDF 的复数形式。嗯，这个解决方案讲的是1，我从来没有尝试过几个PDF。由于解决方案是由 html“id”制成的，我们知道“id”每页都有一个单例模式。尽管如此，我相信无论创建什么用例，每页有几个 PDF 都是可行的。

@netotz 我没有在这里调查。我只是想到这可能涉及硬件问题。您没有提到发生这种情况的浏览器，也没有提到任何操作系统内部结构...我只是猜测（尽管我可能是错的）1.8 MB 是相当小的数据量...