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转换为data-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...

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”。

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

1 个答案: