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。我该如何解决此问题。此和此 SO问题与该主题相关，但与我的情况无关。

我不能使用HTML的'embed'和'iframe'标签，因为它们需要物理文件作为其'src'属性，但是我没有物理的PDF文件，而是它的内存数据。

Answer 1

如果将来有人遇到这个问题，我会使用 blob:URL 技术修复它。StackOverflow的这个问题引导我找到了解决方案。因此，我没有在 HTML 对象元素中打开 PDF 文件，而是使用 Blob URL 在新窗口中打开它。Chrome 版本 60 更新后阻止了数据 URL，因此无法使用 data:URL 来实现此目的。