Chrome中使用OBJECT标记加载base64编码的PDF数据时，文件大小存在问题

Question

我的问题与在Chrome浏览器中显示base64编码的PDF文件数据有关。这些PDF文件不是静态物理文件，而是转换为base64编码数据的流。它是一个使用Node.js后端的单页面应用程序。PDF文件以模态弹出框的形式显示，而不是在新标签页或窗口中打开。下面是负责显示base64编码PDF数据的代码：

var objbuilder = '';
objbuilder += ('<object width="100%" height="100%" data="data:application/pdf;base64,');
objbuilder += (r.response);
objbuilder += ('" type="application/pdf" class="internal">');
objbuilder += ('</object>');
var html = '';
html += '<div class="modal fade in" id="linkedDoc" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content" style="height:800px;width:600px;">';
html += '<div class="modal-body" style="height: 100%;" id = "linkedBody">';
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls previous" href="javascript:void(0);" data-dismiss="modal" aria-hidden="true">Close</a>';
html += '</div></div></div></div></div>';
$('#linkedDoc').remove();
$('body').append(html);
$('#linkedBody').append(objbuilder);
$('.modal').modal({
    keyboard: false,
    show: true
});
$('.modal-dialog').draggable({
    handle: ".modal-header"
});
$('.modal-content').resizable();
$('#linkedBody').on('show.bs.modal', function () {
    $(this).find('.modal-body').css({
        'max-height': '100%',
        'max-width': '100%'
    });
});

这种方法适用于文件大小约为1 MB的文件，但不适用于更大的文件。我想要显示的一些文件大小为5 MB甚至10 MB。我该如何解决这个问题？这里有两个相关主题的Stack Overflow问题（链接）和（链接），但都不适用于我的情况。

我无法使用HTML“嵌入”和“iframe”标签，因为它们需要一个物理文件作为其“src”属性，但我没有实际的PDF文件，而是内存数据。

- ITExpert

---

@BusyBee 不可运行的代码不应该被包含在 CodeSnippets 中。 - Kaiido

所以你的服务器将数据发送为base64字符串？为什么不直接从URI发送二进制数据呢？ - Kaiido

@Kaiido：“为什么不直接从URI中获取二进制数据？”这有什么区别吗？ - ITExpert

好的，你只需要将你的对象数据设置为这个URI。 - Kaiido

@Kaiido，您的意思是“object”标签的“data”属性可以接受二进制PDF数据而不是Base64编码的数据吗？如果是，那我需要做哪些更改呢？ - ITExpert

不，我的意思是它接受一个URI，如果您的服务器在请求URI时提供二进制数据，则该对象将能够显示PDF。（就像最基本的情况） - Kaiido

Answer 1

如果未来有人遇到这个问题，我用blob:URL技术解决了它。 这篇 StackOverflow 帖子指导我找到了解决方案。所以，我没有使用HTML object元素打开PDF文件，而是在一个新窗口中使用Blob URL打开它。自Chrome 60版本更新后，无法使用data:URL实现此目标，因为他们阻止了data URL。

- ITExpert

---

但是，如果我想要一个包含PDF的页面，那么这不是一个解决方案。 - ihavenokia

Answer 2

第一种方法

您可以尝试使用iframe标签而不是object标签。

第二种方法

您可以提供PDF链接而不是实际数据。

您可以创建PDF文件并将其存储在某个位置，然后提供链接到对象标记。

第三种方法您也可以尝试使用嵌入标签

也许可以解决您的问题 :)

- Raman Kumar

---

第三种解决方案：使用 blob 代替 base64 字符串。（JavaScript 解决方案） - GottZ

@GottZ，您能否发布一个带有一些参考链接示例的答案，那将非常有帮助。 - ITExpert

你能尝试使用 iframe 标签而不是 object 标签吗？不行，因为对于 iframe，我们必须在某个地方物理上存在一个静态文件。 - ITExpert