iframe src 设置大型base64数据答案

【问题标题】：Iframe src set large base64 dataiframe src 设置大型base64数据
【发布时间】：2015-04-30 06:13:30
【问题描述】：

我有用于 PDF 预览的 iframe 和大量 base64 数据（超过 10mb）。

<iframe src="" type="application/pdf"></iframe>'

我如何使用这些数据？当我尝试设置数据时：

$("iframe").attr("src", data);

某些浏览器正在崩溃。

我没有 src 链接。此数据由 ajax 接收。有什么建议吗？

【问题讨论】：

如何检索data？
它在“成功”方法中在 jQuery ajax 之后检索。响应：data:application/pdf;base64,JVBERi0xLjUKJdDUxdgKNSAwIG9iaiA8PAovTGVuZ3RoIDE2NjUgICAgICAKL0ZpbHRlciAvRmxhdGVEZWNvZGU......（约10mb）
能不能加success功能码，重要吗？

标签： jquery iframe base64 src

【解决方案1】：

试试这个：也许为时已晚：

<iframe src="data:application/pdf;base64,YOUR_BINARY_DATA" height="100%" width="100%"></iframe>

【讨论】：

我的浏览器 (chrome) 下载文件而不是显示 pdf。你能帮我找出解决办法吗？
@PulkitAggarwal 确保生成了正确的 mime，并且 ;base64, 和实际的 base64 数据有效。

【解决方案2】：

如果您需要通过 AJAX 获取、设置标头或其他内容，请查看 URL.createObjectURL()。给定一大块字节，它可以为您提供适合 iframe 的src 的内容。

var xhr = new XMLHttpRequest();

xhr.open('GET', 'some.pdf');
xhr.onreadystatechange = handler;
xhr.responseType = 'blob';
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.send();

function handler() {
  if (this.readyState === this.DONE) {
    if (this.status === 200) {
      // this.response is a Blob, because we set responseType above
      var data_url = URL.createObjectURL(this.response);
      document.querySelector('#output-frame-id').src = data_url;
    } else {
      console.error('no pdf :(');
    }
  }
}

对象 URL 非常有趣。它们的形式为blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170。实际上，您可以在新选项卡中打开它们并查看响应，当创建它们的上下文关闭时它们会被丢弃。

这是一个完整的例子：https://github.com/courajs/pdf-poc

【讨论】：

我不相信你认为它是 base 64
@William 我假设端点返回二进制文件，发帖人不知何故将其转换为前端的 base64 数据 uri。如果是这样，他们可以改用这种技术，甚至永远不会得到 base64 编码的数据。如果没有，您只需将上面示例中的 url ('some.pdf') 替换为数据 uri 字符串即可。
如果你将这么多的内容加载到 JavaScript 中，就像现在冻结一样，它可能会冻结。
根据我的经验，当您将这样的大字符串放入 DOM 时，事情会冻结，例如当海报将其设置为 src 属性时。但我已经 fetched 并使用了 10MB 的 Blobs，使用这种技术没有问题。

【解决方案3】：

不确定具体是什么问题，但这里有一个 jsFiddle，它是一个示例，您可以使用 iframe + 使用 jQuery 设置其 src：

http://jsfiddle.net/krgyoadv/

可能还有其他导致浏览器崩溃的问题与在 iframe 上设置 src 无关。

【讨论】：

感谢您的回答。但我在 iframe src 中没有链接。我只有 base64 数据。
@rozochkin - 我正在尝试做同样的事情，但 pdf 数据未显示在 iframe 或嵌入中。 var pdfData = '@Model.PdfDataString'; $("iframe").attr("src", 'data:application/pdf;base64,{0}'.replace('{0}', pdfData)); $("embed").attr("src", 'data:application/pdf;base64,{0}'.replace('{0}', pdfData));

【解决方案4】：

我没有 src 链接。此数据由 ajax 接收。

如果您使用 AJAX 加载数据，您应该能够将 same 网址直接提供给 iframe，绕过 AJAX 数据加载和$("iframe).attr("src", data) 阶段。如果此 AJAX 请求仅返回 base64 数据，则无需发出请求。只需将 set iframe 的 src 直接设置为 this url，它应该可以工作。

【讨论】：