PDF not loading in Microsoft IE and Microsoft Edge
Question
Thanks for always being supportive. I have come across an issue. I have some study materials(.PDF) embedded into my webpage . Not in the <iframe> but a customized class for PDF viewing for security purpose. Now the problem here is that I can view the PDF's in Firefox and Chrome but not on Microsoft Edge or Internet Explorer 11. What could be the possible reason for this. My website is live on server and I came up to know this when the candidates couldn't read files. Here is my code for displaying on my page,
<div class="col-sm-9">
<div id="viewer" class="pdf-viewer" oncontextmenu="return false" data-url="../sadmin/studyMaterial/<?php echo $db->idToField("tbl_studymaterials", "file_pdf", $chapterId) ; ?>"></div>
</div>
And the pdf-viewer class,
.pdf-viewer {
background: #909090;
border: 1px solid #ddd;
height: 400px;
position: relative;
overflow: hidden;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}
I would like to repeat here, I can view files properly in Firefox and Chrome but not in MS Edge and Internet Explorer 11. Any help would be really helpful and highly appreciated.
1 answers
solution1
0 2018-01-13 07:00:03
Working in IE-11 and Edge... Try it. It may help
<!DOCTYPE html>
<html>
<head>
<title>PDF View</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
.pdf-viewer {
background: #909090;
border: 1px solid #ddd;
height: 1000px;
position: relative;
overflow: hidden;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="col-sm-9">
<div>
<object data="n1.pdf" type="application/pdf" width="100%" height="auto" id="viewer" class="pdf-viewer">
</object>
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.