Not able to embed PDF blob in HTML in IE

Question

I have adopted various approaches to embed PDF blob in html in IE in order to display it.

1) creating a object URL and passing it to the embed or iframe tag. This works fine in Chrome but not in IE.

</head>
<body>
    <input type="file" onchange="previewFile()">
    <iframe id="test_iframe" style="width:100%;height:500px;"></iframe>
    <script>
        function previewFile() {
            var file = document.querySelector('input[type=file]').files[0];
            var downloadUrl = URL.createObjectURL(file);
            console.log(downloadUrl);
            var element = document.getElementById('test_iframe');
            element.setAttribute('src',downloadUrl);
        }
    </script>
</body>

2) I have also tried wrapping the URL Blob inside a encodeURIcomponent()

Any pointers on how I can approach to solve this?

Does this answer your question? [PDF embed not working in IE11, but it WORKS when edit the HTML in DOM Explorer (F12 - debug tool of IE)](https://stackoverflow.com/questions/21340820/pdf-embed-not-working-in-ie11-but-it-works-when-edit-the-html-in-dom-explorer) — julka, Feb 19 '20 at 06:22

score 0 · Answer 1 · answered Feb 20 '20 at 06:20

IE doesn't support iframe with data url as src attribute. You could check it in caniuse. It shows that the support is limited to images and linked resources like CSS or JS in IE. Please also check this documentation:

Data URIs are supported only for the following elements and/or attributes.

object (images only)

img

input type=image

link

CSS declarations that accept a URL, such as background, backgroundImage, and so on.

Besides, IE doesn't have PDF viewer embeded, so you can't display PDFs directly in IE 11. You can only use msSaveOrOpenBlob to handle blobs in IE, then choose to open or save the PDF file:

if(window.navigator.msSaveOrOpenBlob) {
    //IE11
    window.navigator.msSaveOrOpenBlob(blobData, fileName); 
}
else{
   //Other browsers
    window.URL.createObjectURL(blobData);
    ...
}

Not able to embed PDF blob in HTML in IE

1 Answers1