个人中心
gpt4 book ai didi

html - 如何将 Base64 编码的 PDF 数据 URI 嵌入到 HTML 5 `` 数据属性中？
转载 作者：技术小花猫 更新时间：2023-10-29 12:54:59 24 4
gpt4 key购买 nike

所以在我的应用程序中，用户可以选择将文件上传到 <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...

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，有人有任何其他想法吗？

最佳答案

是的，我可以使用一个文件...

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 是相当少量的数据......

关于html - 如何将 Base64 编码的 PDF 数据 URI 嵌入到 HTML 5 `<object>` 数据属性中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31441454/

24 4 0
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com