Render byte array as pdf using Javascript inside iframe Internet Explorer/Edge

Question

I have a byte array(which was converted from an original PDF file) returned from an http post method. My requirement is to render the original PDF inside an iframe , i use angular 1.x with IE/Edge browser.

Answer 1

IE and Microsoft Edge don't support iframe with data url as src attribute. So you can't display blob data of pdf directly in an iframe in IE or Microsoft Edge.

The workaround is to use msSaveOrOpenBlob to handle blobs in IE and Microsoft Edge to open the pdf or using PDF.js to render it in browsers using <canvas>. You could refer to this thread and this thread for more information about using PDF.js.

Answer 2

I had put a similar question here. The truth is you cannot display PDF directly in IE/Microsoft Edge directly as a blob, even if you use a pdf viewer. The only solution you can use is msSaveOrOpenBlob():

navigator.msSaveOrOpenBlob(blob_url);

if you want, you can perform the action in a new window:

window.open(navigator.msSaveOrOpenBlob(blob_url))

This will give you a prompt to either open or save the file. If you click the open button, it will download a local copy of the file and open it, which is possible in IE/Edge. If you are so adamant that you need to view the file, I suggest you use Google Chrome or Mozilla Firefox, both of which can open the file directly. Firefox has its own PDF Viewer.

Happy Coding!! :)