URL.createObjectURL(blob) not creating proper URL in IE 11

Question

I'm trying to render a pdf inside an iframe. It is working fine on Mozilla (v54) and Chrome (v59) but nothing happens in IE(v11) when I click on the link which loads the PDF. After debugging several times I found that the URL in Chrome/Firefox is blob:http://localhost:37444/5a8e7fed-cd61-4c58-904c-fad2ae169718 and in IE(v11) it is blob:B7395CB5-169D-471F-BB8F-AA90EAFB6DDB. Why is URL.createObjectURL(blob) not appending the http request in IE(v11)

function (iframe, url, headers) {            

        var xhr = new XMLHttpRequest();

        xhr.open('GET', url);
        xhr.onreadystatechange = handler;
        xhr.responseType = "arraybuffer";

        headers.forEach(function (header) {
            xhr.setRequestHeader(header[0], header[1]);
        });
        xhr.send();

        function handler() {
            if (this.readyState === this.DONE) {

                if (this.status === 200) {
                    var blob = new Blob([xhr.response], { type: "application/pdf" });
                    var objectUrl = URL.createObjectURL(blob);                       

                    iframe.src = objectUrl;
                } else {
                    console.error('XHR failed', this);
                }
            }
        }

Possible duplicate of [Displaying binary file (pdf) in IE 11](https://stackoverflow.com/questions/26161314/displaying-binary-file-pdf-in-ie-11) — demo, Jul 17 '17 at 11:19
The solution you are suggesting says you have to make it Open or Save in IE(v11), but i want to render the pdf in a modal box. Please suggest workarounds if any — Amith Nagaraj, Jul 17 '17 at 12:59

score 1 · Accepted Answer · answered Feb 15 '18 at 15:47

IE does not create a url for these blob objects because of security reasons i think.So using var objectUrl = URL.createObjectURL(blob);will not give you the source url which you can use inside iframe or embed tag. I faced the same issue and searched a lot about the fix.But could not get the answer.Instead i solved it as following. you can use the following for IE

if (bowser.msie && window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveOrOpenBlob(file, fileName);
}else{
    //do what you were doing for other than IE
}

the above IE code will prompt the user that whether he wants to save the file or directly open it. User can click on button 'open' and then IE will show the PDF without downloading it in default reader.

URL.createObjectURL(blob) not creating proper URL in IE 11

1 Answers1