I was facing the same issue. In my case the Content-Type of my files was "binary/octet-stream". I had to manually change it to "application/pdf" to resolve it
Answer from Mahesh Kumar Ronde on Stack OverflowI was facing the same issue. In my case the Content-Type of my files was "binary/octet-stream". I had to manually change it to "application/pdf" to resolve it
It depends on the content type in the response header. You may check if your web server sets proper header information, e.g. Content-Type: application/pdf.
"Chrome Dev-Tools(F12)" -> Network Tab, check the response headers.
How to open a PDF file in an <iframe>?
angular - <iframe> downloads pdf file instead of displaying - Stack Overflow
How to display PDF document in an IFRAME or HTML Web ...
Display pdf in Web Page using iframe, embed, or object?
Videos
Using an iframe to "render" a PDF will not work on all browsers; it depends on how the browser handles PDF files. Some browsers (such as Firefox and Chrome) have a built-in PDF rendered which allows them to display the PDF inline where as some older browsers (perhaps older versions of IE attempt to download the file instead).
Instead, I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.
In your HTML, you could set up a div to display the PDFs:
<div id="pdfRenderer"></div>
Then, you can have Javascript code to embed a PDF in that div:
var pdf = new PDFObject({
url: "https://something.com/HTC_One_XL_User_Guide.pdf",
id: "pdfRendered",
pdfOpenParams: {
view: "FitH"
}
}).embed("pdfRenderer");
This is the code to link an HTTP(S) accessible PDF from an <iframe>:
<iframe src="https://research.google.com/pubs/archive/44678.pdf"
width="800" height="600">
Fiddle: http://jsfiddle.net/cEuZ3/1545/
EDIT: and you can use Javascript, from the <a> tag (onclick event) to set iFrame' SRC attribute at run-time...
EDIT 2: Apparently, it is a bug (but there are workarounds):
PDF files do not open in Internet Explorer with Adobe Reader 10.0 - users get an empty gray screen. How can I fix this for my users?
I don't understand why there's brackets around an attribute:
[src]If you don't already know: Don't do that.<iframe>doesn't havetypeas a valid attribute, buttypedoes work for<iframe>'s sister tags<object>and<embed>.
The following Demo does not function on SO due to their restrictive sandbox. Go to this Plunker to see a functional Demo. Source PDF courtesy of PDFObject
It looks like Plunker no longer runs embeded content anymore, so if you want to review a functioning demo, simply copy and paste the entire code in any text editor (Notepad, Notepad++, etc.) and save as an HTML file (.html file extension).
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
figure {
display: table;
border: 3px ridge grey;
position: relative;
width: 96vw;
min-height: 250px;
height: auto;
margin: 0 auto 35px;
}
figcaption {
border: 3px ridge grey;
text-align: center;
font: 900 20px/1.5 Verdana;
padding: 0 0 8px 0;
background: rgba(51, 51, 51, 0.3);
color: #fff;
}
iframe,
object,
embed {
overflow: hidden;
position: absolute;
}
</style>
</head>
<body>
<figure>
<figcaption>IFRAME</figcaption>
<iframe src="https://pdfobject.com/pdf/sample-3pp.pdf#page=1" class="frameSet" frameborder="0" allowfullscreen width="100%" height="100%"></iframe>
</figure>
<figure>
<figcaption>OBJECT</figcaption>
<object data="https://pdfobject.com/pdf/sample-3pp.pdf#page=2" class="objectSet" type="application/pdf" width="100%" height="100%"></object>
</figure>
<figure>
<figcaption>EMBED</figcaption>
<embed src="https://pdfobject.com/pdf/sample-3pp.pdf#page=3" class="embedSet" type="application/pdf" width="100%" height="100%">
</figure>
</body>
</html>You need to modify your URL like the below
iframeURL = 'urlThatYouGetFromAPI' + '&embedded=true'
<iframe [src]="iframeURL"></iframe>
Actually, All you need is adding this string &embedded=true to the end of URL.
Also you can use domSanatizer to make it more safe
readonly #domSanitizer = inject(DomSanitizer);
iframeURL = this.#domSanitizer.bypassSecurityTrustResourceUrl(
`${URL}&embedded=true`
);
I'm trying to display a PDF in my web page but not have it open a new page. I've been looking at embed, iframe, and object tags and have seen their pros and cons and I'm more or less pushing for iframe. I select the file from a treeview that gets the files from a REST API and I want to add the selected file to the src of the iframe but don't know exactly how to do it. I was able to make it so the file opens to its own page but not sure about embedding it. Any advice?
Here's my code to display the file in its own page. filePath is the full path for the file and selectFile is just the file name itself.
Dim user As WebClient = New WebClient()
Dim buffer As Byte() = user.DownloadData(filePath)
If Not buffer Is Nothing Then
Response.AddHeader("content-length", buffer.Length.ToString())
Response.AddHeader("Content-Disposition", "inline; filename=" + selectFile)
Response.ContentType = "application/pdf"
Response.BinaryWrite(buffer)
End If
Hi all,
I'm a Firefox user for as long as Firefox and Mozilla exists 😁
I never switched to any other browser no matter what happened. But I do try other and have them installed as I'm web developer so testing in other browsers is a must.
What I have a problem for quite some time is that iframe with PDF doesn't work as intended in many web apps for me. I've also tried to code it my self but can't make it work.
Firefox immediately ask to download the PDF or view in in new tab (recently added), but all other browsers allows embedding PDFs.
Is it a known issue/feature or?
Thanka