Displaying Blob PDF in Edge/IE11

Question

I have a django app (from which I get some html as a client), and a base64-encoded PDF which needs to be displayed. I've tried multiple approaches, which work as expected in Chrome/Firefox.

I'm working with django, so there will be some templates and some JavaScript.

pdf_preview_embed is a div

Embed DataURL

<embed width=100% height=100% type="application/pdf" src="data:application/pdf;base64, {{ pdf }}"></embed>

Unacceptable solution, because it may require inlining megs of data. Works in IE11 under Windows 7, doesn't work on Edge and IE11 under Windows 10.

Embed Blob

base64binary implementation

var blob = new Blob( [Base64Binary.decode(pdf)], {'type': 'application/pdf'} );
pdfURL = URL.createObjectURL( blob );
$('#pdf_preview_embed').html(
    '<embed width=100% height=100% type="application/pdf" src="'+pdfURL+'"></embed>'
);

Also does not work in Edge and IE11.

<iframe> Blob

$('#pdf_preview_embed').html(
    '<iframe src="'+pdfURL+'" style="width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe>'
);

Edge claims it can't open pdf, and IE11 doesn't show anything.

Actually using pdf.js to display the pdf

Now here something happens: I found out the blob url origin is null, instead of the application for Edge and IE11, causing pdf.js to refuse opening it. Server CORS is configured to allow all origins. I am a bit lost.

Serrato

Feed your PDF data to PDF.js as is without converting it to BASE64 or Blob (you might need to change viewer.html to handle your transport method) – Nazareth

I can't add the code to link, url gets too long! – Serrato

I manager to solve it using your suggestion, but the issue of blob origin in Edge/IE11 remains unresolved. – Serrato

PDF.js is using polyfill for URL object constructor (which IE11 does not have) -- probably polyfill needs to fixed. (Blob URL usually has unorthodox way of specifying its origin) – Nazareth

I've struggled to find much information on this, but just recently came to the same conclusion that almost exactly 1 year from your original question that Edge just isn't generating appropriate blob urls. That is when using window.URL.createObjectURL(someblob) you end up with a URL that just has 'blob:somedatahere' where in chrome/firefox you get 'blob:whatever.com/somedatahere'. This is not only an issue for displaying PDFs within an embed (what I was originally attempting), but it is also blocking the popout into an external window as well. – Tantalous

Answer 1

A cross-browser workaround to have an iframe of PDF.js load a blob of a PDF via the iframe URI.

An example of a standard usage case blob URI:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

File viewer.js:

within function webViewerOpenFileViaURL:

change line from:

if (file && file.lastIndexOf('file:', 0) === 0) {

to:

if (file && file.lastIndexOf('file:', 0) === 0 || file && file.lastIndexOf('blob:', 0) === 0) {

And to further stop the viewer from breaking when the "origin" is behaving in an IE 11/Edge manner:

within function validateFileURL:

change line from:

if (fileOrigin !== viewerOrigin) {

to:

if (fileOrigin != "null" && fileOrigin !== viewerOrigin) {

Now FF, Chrome, IE 11, and Edge all display the PDF in a viewer in the iframe passed via standard blob URI in the URL.

Siderosis

I try your code. but can't load pdf data in viewer.html – Pennate

Answer 2

Blob URLs will not work in IE11 due to security restrictions!

Tevis

Yes, they will, the behavior just differs from the other major browsers, so IE11 must be pampered for it to work. – Siderosis