Chrome 中 OBJECT 标记中 base64 编码 PDF 数据的文件大小问题

Posted 2023-05-09

【中文标题】Chrome 中 OBJECT 标记中 base64 编码 PDF 数据的文件大小问题

【英文标题】：File size issue in Chrome for base64-encoded PDF data in OBJECT tag

【发布时间】：2019-03-22 01:00:57

【问题描述】：

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

var objbuilder = '';
objbuilder += ('<object   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编码的数据吗？如果是，那我应该做些什么改变？

【参考方案1】：

以后有人偶然发现这个问题，我使用 blob:URL 技术解决了这个问题。 THIS *** 问题引导我找到解决方案。因此，我没有在 HTML 对象元素中打开 PDF 文件，而是使用 Blob URL 在新窗口中打开它。在 Chrome 版本 60 更新后使用 data:URL 无法实现，他们在其中阻止了数据 URL。

【讨论】：

但是如果我想要一个里面有pdf的页面，那么这不是一个解决方案

【参考方案2】：

第一种方法

你能不能用 iframe 标签代替对象标签。

第二种方法

您能否提供 PDF 链接而不是实际数据。

您可以创建 pdf 文件并存储在某个位置，然后提供指向对象标签的链接。

第三你也可以试试嵌入标签

可能会解决您的问题:)

【讨论】：

第三种解决方案：使用 blob 而不是 base64 字符串。 （javascript解决方案）

@GottZ 你能用一些参考链接的例子发布答案吗，这会很有帮助。

“你能用 iframe 标签代替对象标签吗？” 不能，因为 iframe 我们必须有一个物理上存在的静态文件。