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

Question

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

15

在我的应用程序中，用户可以选择上传文件到一个<input type = "file" id = "my-file">（HTML 5 文件输入）中。然后，我可以使用以下Javascript获取此文件：

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

我能否以某种方式将var file用作<object>标签中的data？这是一个<object>标签示例，其中PDF是通过访问URL并与服务器联系来获取的。

<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...

这就是为什么在Internet Explorer中使用此方法无法使用PDF文件（仅适用于图像）...太遗憾了 :(

更新2：

尝试使用pdf.js，有些成功...它可以在页面上显示PDF，但在Internet Explorer 11中非常缓慢（单个页面需要5秒）。它也只能一次显示一页，而<object>标签可以立即在一个不错的可滚动容器中显示所有页面。虽然这是一个极端的后备选项，但我不想走这条路。

还有其他任何想法吗，如何在网页中直接预览用户上传的PDF文件？

- kibowki

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - kibowki

我可能误解了原始问题。我以为这是从标题中提取的HTML文件。这是不正确的吗？ - charlietfl

这个 Web 应用是一个 HTML 文件，其中包含一个 <input type = "file">，允许用户从他们的文件系统上传文件。我想获取这个文件（它将是一个 PDF），并允许用户预览它。我正在尝试将用户选择的文件（代码示例中的 var file）放入 <object> 标签中。 - kibowki

可能需要查看jspdf库。 - charlietfl

您现在需要问题的答案吗？如果是的话，我可以给您。 - Bharata

显示剩余4条评论

2个回答

3

除了上面的答案和Dirk的答案中的评论之外（由于我没有50个声誉来直接评论），我想指出一种方法来预防这个问题：<object>在文件大小大于1mb时直接呈现base64数据的问题。 步骤：

将base64转换为blob
从blob创建URL
使用URL作为数据的src

可以在这里找到一个好的帖子：另一个pdf lib的答案。但这也适用于我们的情况。

- Ash

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dirk Schumacher · Accepted Answer

是的，我已经用文件使其工作了...

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的复数形式。好吧，这个解决方案只讨论一个PDF，我从来没有尝试过几个PDF。由于该解决方案是通过html“id”创建的，我们知道每页都具有单例模式。尽管如此，我相信使用任何用例都可以以某种方式在每页上使用几个PDF。

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