Iframe src set large base64 data

Question

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?

Answer 1

Try this: Maybe it's too late:

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

Answer 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