Iframe src set large base64 data

问题

I have iframe for PDF preview and ton of base64 data (more than 10mb).

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

How can i use this data? When i try to set a data:

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

Some browsers are crashing.

I don't have src link. This data received by ajax. Any suggestions?

回答1:

Try this: Maybe it's too late:

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

回答2:

If you need to fetch via AJAX, to set headers or something, check out URL.createObjectURL(). Given a chunk of bytes, it can give you something suitable for the src of the iframe.

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

The object URLs are pretty interesting. They're of the form blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. You can actually open them in a new tab and see the response, and they're discarded when the context that created them is closed.

Here's a full example: https://github.com/courajs/pdf-poc

回答3:

Not sure what in particular is the problem, but here's a jsFiddle that is an example how you can use iframe + setting its src using jQuery:

http://jsfiddle.net/krgyoadv/

There might be other issues causing browser crashes on your end that are unrelated to setting src on iframe.

回答4:

I don't have src link. This data received by ajax.

If you load data with AJAX you should be able to feed the same url directly to iframe, bypassing AJAX data load and $("iframe).attr("src", data) phases. If this AJAX request returns just base64 data, then you don't need to make request. Just set set iframe's src to this url directly and it should work.

来源：https://stackoverflow.com/questions/28766667/iframe-src-set-large-base64-data

标签

javascript

iframe

base64

src