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.

Solution

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.

Comments

[Sumit patel]

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