PDF Viewer using object tag not working for Edge

后端未结

关注

 3  1728

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:

相关标签:

3条回答

南旧

2021-01-12 17:56

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>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function loadPdf() {
            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>
<object width="1080" height="1080" id="ScanPdf" data="old url here"
        type="application/pdf" scanitemid="2317">ffff</object>
<button onclick="loadPdf()">LOAD PDF</button>
</body>
</html>

0 讨论(0)

既然无缘

2021-01-12 18:05
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>
    <body style='height: 100%; width: 100%; overflow: hidden; margin:0px; background-color: rgb(82, 86, 89);'>
        <embed style='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
0 讨论(0)
发布评论:

提交评论
- 加载中...
陌清茗

2021-01-12 18:17

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...