如何将 Base64 编码的 PDF 数据 URI 嵌入 HTML 5 `<object>` 数据属性中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31441454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to embed a Base64 encoded PDF data URI into a HTML 5 `<object>` data attribute?
提问by twilco
So in my application, users have the option to upload a file to an <input type = "file" id = "my-file">(HTML 5 File input). I can subsequently grab this file using the following Javascript:
因此，在我的应用程序中，用户可以选择将文件上传到<input type = "file" id = "my-file">（HTML 5 文件输入）。我随后可以使用以下 Javascript 获取此文件：
var files = $("#my-file").files;
var file = files[0];
Can I somehow use this var fileas the datain an <object>tag? Here is an example of an object tag where the PDF is grabbed by hitting a URL and contacting the server.
我可以以某种方式使用这个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>
How can I accomplish this? Please note, I must support Internet Explorer 11.
我怎样才能做到这一点？请注意，我必须支持 Internet Explorer 11。
UPDATE:
更新：
I've tried something that ultimately ended in failure. I converted the PDF to a data-uri using FileReader and then used that in the dataattribute of the <object>tag, which renders perfectly in Chrome but not at all in Internet explorer.
我尝试过一些最终以失败告终的事情。我使用 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);
Where the reader data comes out looking like:
读取器数据出来的地方看起来像：
data:application/pdf;base64,JVBERi0xLjQKJe...
Here is the reason PDF's don't work with this approach in Internet Explorer(images only)...so sad :(
这就是 PDF 在 Internet Explorer 中无法使用这种方法的原因（仅限图像）......太伤心了 :(
UPDATE 2:
更新 2：
Tried pdf.jswith some success...it displays the PDF on the page, although it is incredibly slow (5 seconds for a single page) in Internet Explorer 11. It also only displays one page at a time, whereas the <object>tag displayed all pages instantly in a nice scrollable container. While this is an extreme fallback option, I'd like to not go down this route.
尝试了pdf.js并取得了一些成功......它在页面上显示了 PDF，尽管它在 Internet Explorer 11 中非常慢（单页 5 秒）。它一次也只显示一页，而<object>标签显示所有页面立即在一个漂亮的可滚动容器中。虽然这是一个极端的后备选项，但我不想走这条路。
Anyone have any other idea as to how I can preview the PDF's that the user uploads directly in the webpage?
任何人对如何预览用户直接在网页中上传的 PDF 有任何其他想法？
回答by Dirk Schumacher
Yes I got it working with a file...
是的，我得到了它的文件...
HTML:
HTML：
<object id="pdf" data="" type="application/pdf"></object>
Javascript (Jquery)
Javascript (Jquery)
var fr = new FileReader();
fr.onload = function(evtLoaded) {
$('#pdf').attr('data', evtLoaded.target.result );
};
fr.readAsDataURL(inFile);
Compared to your approach I use the 'I am done reading the file'-callback differently by using the event. If I got it right: 'loadend' will always be called no matter if reading succeeded or failed.
与您的方法相比，我通过使用事件以不同的方式使用“我已完成读取文件”的回调。如果我做对了：无论读取成功还是失败，都将始终调用“loadend”。
