HTML embed tag problem - green loading bar

Question

I would like to embed an PDF preview in my web site. With the embed tag it works fine on modern browsers, but on older versions the following shows up:

Does someone know how to solve it without using any external JS library?

The data that I would like to preview is a base64 encoded pdf.

<embed src="data:application/pdf;base64,[:base64-encoded-pdf:]" width="100%" height="640px">

Does this solution (or any of the other solutions on the page) help? https://stackoverflow.com/a/19654875 — Steve, Mar 15 '21 at 05:13
I will try with an iframe, but the data is bas64 encoded not na url could that be a problem — davidm, Mar 16 '21 at 05:43

score 0 · Answer 1 · answered Mar 16 '21 at 21:41

0

On older browsers, it may be an issue to use Data URIs, so try uploading your pdf to a website and embedding it into an iframe.

<iframe src='https://www.example.com/example.pdf' width="100%" height="640px">
Something went wrong :(
</iframe>

answered Mar 16 '21 at 21:41

quicVO

778
4
13

Then try turning the [data URI into a blob](https://stackoverflow.com/questions/12168909/blob-from-dataurl) – quicVO Mar 17 '21 at 19:03

score 0 · Answer 2 · answered Mar 18 '21 at 18:35

0

<!-- initially load about:blank for MSIE -->
<iframe id="pdf" src="about:blank" height="100%" width="100%"></iframe>

var pdf_data_uri="data:application/pdf;base64," + PDF_DATA;
document.getElementById("pdf").setAttribute('src', pdf_data_uri);

answered Mar 18 '21 at 18:35

caffeinatedbits

471
5
8

HTML embed tag problem - green loading bar

2 Answers2