View PDF base64 on IE with PDF.js

With Chrome/Firefox it’s easy to open a PDF as string base64  format, you just includ it in inside an Object HTML tag :

<object data="data:application/pdf;base64,..." type="application/pdf" width="100%" height="100%"/>

But…. IE doesn’t support pdf as base64 formart :-/. Why??

So I used PDF.js to do a workaround, thank you mozilla !

You can download the source here : https://mozilla.github.io/pdf.js/

Inside the html page

Declaration of the pdf view

 < iframe id="the-frame" width="100%" height="100%" allowfullscreen webkitallowfullscreen ></iframe>

Conversion of the base64 string into a Blob in JS

 

function convertDataURIToBinary(base64) {
   var raw = window.atob(base64);
   var rawLength = raw.length;
   var array = new Uint8Array(new ArrayBuffer(rawLength));

   for(var i = 0; i < rawLength; i++) {
     array[i] = raw.charCodeAt(i);
   }
   return array;
}

 var pdfAsDataUri = '[here you put the base64 string]';
 var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
 var url = 'WEB-JNJ/ViewerJS/web/viewer.html?file=';

 var binaryData = [];
 binaryData.push(pdfAsArray);
 var dataPdf = window.URL.createObjectURL(new Blob(binaryData, {type: "application/pdf"}))

Open the converted base64 string with PDF.js

document.getElementById('the-frame').setAttribute('src',url + encodeURIComponent(dataPdf));

Fix the “file origin does not match viewer’s” in IE

I resolve to comment this lines in viewer.js

if (fileOrigin !== viewerOrigin) {
throw new Error('file origin does not match viewer's');
}

*photo from softpedia

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s