Skip to content Skip to sidebar Skip to footer
Home / Html / Microsoft Edge / Pdf

Pdf Viewer Using Object Tag Not Working For Edge

Post a Comment
I am trying to show a PDF document inline using the object tag - it works as expected in Chrome and Firefox but isn't working in Edge. Sample Code:

Solution 1:

I've faced a similar issue. Object tag behaves differently in IE and EDGE; the sever needs to accept the HEAD request made by the object tag (HEAD request : only in IE & EDGE) and give a response, then a get request is made to fetch the file. This is a limitation in Microsoft's browsers.

Edit 1: This worked for me (EDGE and IE too) if I add the object tag html with the url in the data attribute to the dom instead of setting the attribute value, using javascript, of object tag which is already on the dom. Please note that I've a endpoint flushing response, this updates the value of data attribute.

Solution 2:

I replaced the value of the type attribute with text/html.

<object id="pdfObj" data="http://www.pdf995.com/samples/pdf.pdf"type="text/html" target="_parent"></object>

This method works for Edge and IE11. The response of the <object> request contains html :

<!doctype html><html><bodystyle='height: 100%; width: 100%; overflow: hidden; margin:0px; background-color: rgb(82, 86, 89);'><embedstyle='position:absolute; left: 0; top: 0;'width='100%'height='100%'src='about:blank'type='application/pdf'internalid='5BD5603FA794B387B2B97F624FB9ABDE'></embed></body></html>

Edge and IE11 maybe check the response content and block it because it is not a pdf... The pdf is in the <embed> of the response.

Set type to text/html in this situation works for me on this browsers :

  • Firefox
  • Chrome
  • IE11
  • Edge
  • Opera

I don't try on Safari.

I hope this answer has helped you and that my English did not bother you too much

Solution 3:

Changing the data is not going to work in EDGE until the bug is fixed. I found a workaround to remove the element and add a new element to its parent. It may not be for every situation, But it works for me.

<!DOCTYPE html><html><head><metacharset="utf-8" /><title></title><scripttype="text/javascript">functionloadPdf() {
            var viewer = document.getElementById("ScanPdf");
            var parent = viewer.parentElement;
            var newViewer = document.createElement("object");
            viewer.remove(); 
            newViewer.setAttribute("data", "your new url here");
            newViewer.style = oldStyle;
            parent.appendChild(newViewer);
        }

    </script></head><body><objectwidth="1080"height="1080"id="ScanPdf"data="old url here"type="application/pdf"scanitemid="2317">ffff</object><buttononclick="loadPdf()">LOAD PDF</button></body></html>

Post a Comment for "Pdf Viewer Using Object Tag Not Working For Edge"

Menu Halaman Statis

© 2022 - Html5 Academy