【发布时间】:2019-03-22 01:00:57
【问题描述】:
我的问题与在 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 但不超过 1 MB 的文件。我要显示的文件有些是 5 MB,有些甚至是 10 MB。我该如何解决这个问题。 This 和 This SO 问题与主题相关,但不适用于我的情况。
我不能使用 HTML 'embed' 和 'iframe' 标签,因为它们需要一个物理文件作为它们的 'src' 属性,但我没有物理 PDF 文件,而是它的内存数据。
【问题讨论】:
-
@BusyBee 不运行的代码不应包含在 CodeSnippets 中。
-
那么您的服务器将数据作为 base64 字符串发送?为什么不直接从 uri 作为二进制文件?
-
@Kaiido “为什么不直接从 uri 作为二进制文件?” 它有什么不同?
-
你只需要将对象的数据设置为这个 uri。
-
@Kaiido 你的意思是'object'标签的'data'属性可以接受二进制pdf数据而不是base64编码的数据吗?如果是,那我应该做些什么改变?
标签: javascript html google-chrome pdf