Question

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

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

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

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

有些浏览器崩溃了。

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

Answer 1

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

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

Answer 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 :(');
    }
  }
}

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

以下是一个完整的示例：https://github.com/courajs/pdf-poc

Answer 3

不确定问题的具体内容，但是这里有一个jsFiddle，它是如何使用iframe +使用jQuery设置其src的示例：

http://jsfiddle.net/krgyoadv/

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

Answer 4

我没有src链接。这个数据是由ajax收到的。

如果您使用AJAX加载数据，您应该能够将相同的网址直接提供给iframe，从而绕过AJAX数据加载和$("iframe).attr("src", data)阶段。如果此AJAX请求仅返回base64数据，那么您不需要发出请求。只需将iframe的设置直接设置为此网址，它就可以正常工作。

iframe src设置了大的base64数据

4 个答案: