如何将 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 用作<object> 标签中的data？这是一个对象标签示例，其中通过点击 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 转换为 data-uri，然后在 <object> 标记的 data 属性中使用它，它在 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...

Here is the reason PDF's don't work with this approach in 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' 带有每页的单例模式。尽管如此，我相信无论创建什么用例，每页都有 severla PDF 是可行的。

@netotz 我没有在这里调查。我只是想到它可能会涉及到有关硬件的问题。你没有提到它发生的浏览器，也没有提到任何操作系统内部......我只是猜测（虽然我可能是错的）1.8 MB 是相当少量的数据......