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?

It retrieved after jQuery ajax in "success" method. Response: data:application/pdf;base64,JVBERi0xLjUKJdDUxdgKNSAwIG9iaiA8PAovTGVuZ3RoIDE2NjUgICAgICAKL0ZpbHRlciAvRmxhdGVEZWNvZGU...... (about 10mb) — rozochkin, Feb 27 '15 at 14:43

score 43 · Answer 1 · answered Feb 16 '16 at 11:01

43

Try this: Maybe it's too late:

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

answered Feb 16 '16 at 11:01

Oliv

2,343
2
16
10

My browser(chrome) downloads the file instead of showing pdf. Can you help me to find out the solution for this? – Pulkit Aggarwal Oct 23 '18 at 14:24
@PulkitAggarwal Ensure you have the correct mime being generated and that the `;base64,` and actual base64 data are valid. – John Dec 18 '20 at 04:00

score 2 · Answer 2 · answered Feb 16 '17 at 17:38

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

answered Feb 16 '17 at 17:38

FellowMD

2,142
3
16
15

I don't believe you accounted for it being base 64 – Lime Aug 01 '17 at 19:01
@William I'd assumed the endpoint returned binary, and the poster was somehow turning it into a base64 data uri on the front end. If so, they could use this technique instead, and never even end up with base64 encoded data. If not, you can just replace the url in the example above (`'some.pdf'`) with the data uri string, and it will work. – FellowMD Aug 03 '17 at 14:48
It is likely going to freeze if you load that much into to JavaScript just like it is freezing now. – Lime Aug 03 '17 at 14:51
1

In my experience, things freeze up when you put a large string like that into the DOM, like when the poster sets it as the `src` attribute. But I've `fetch`ed and used `Blob`s that are 10MB using this technique with no problem. – FellowMD Aug 13 '17 at 13:09

score 0 · Answer 3 · answered Feb 27 '15 at 14:29

0

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.

answered Feb 27 '15 at 14:29

steady rain

2,246
3
14
18

Thank you for your answer. But i don't have link in iframe src. I only have base64 data. – rozochkin Feb 27 '15 at 14:45
@rozochkin - I am trying to do the same but pdf data is not showing in iframe or embed. 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)); – newdeveloper May 07 '19 at 20:20

score 0 · Answer 4 · answered Feb 27 '15 at 14:49

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.

Iframe src set large base64 data

4 Answers4

Linked