IE7 fails to display any contents in dynamically generated url inside the <object> element. Here's an example for loading pdf documents:
<object data="http://localhost:8080/Documents/Query?Id=document123&Session=1510" width="600" height="400"></object>
The above code will fail to load, however, if I copy and paste the url into the browser's navigation bar, the pdf document will load just fine. If I then manually save the pdf file and replace the object tag with the code below, it works just fine.
<object data="document123.pdf" width="600" height="400"></object>
Is there a work around for this?
It's hard to be sure exactly what the problem is without knowing more about your development platform and possibly seeing some of the code for Query. But my guess is that it's down to the mime type that the server is presenting.
You should send the mime type header as application/pdf.
Just came accross this issue myself.
I don't know if yours was the same problem as mine but if you are using the following:
Response.AddHeader("Content-Disposition", "attachment; filename=...
Remove it, keep the content-type as "application/pdf" but don't assign a disposition, that way it will be processed as an outright file and not as an attachment to be downloaded.
Related
We have a internal website where we have some links to pdf documents hosted on the webserver. If i open Chrome Dev-Tools(F12), and inspect the link and add an embed with the same pdf document, it will rather download the file instead of showing it. I have tried with embed and iframe, but i still get the same problem.
Original code:
<a id="id2239" href="http://example.com:8080/client/attachment/filename.pdf" class="act01">filename.pdf</a>
Screenshot:
Code that we would like to work:
<a id="id2239" href="http://example.com:8080/client/attachment/filename.pdf" class="act01">filename.pdf</a>
<div class="fgh"><embed id="fgh" src="http://example.com:8080/client/attachment/filename.pdf" type="application/pdf" width="400" height="400"></div>
Screenshot:
As you can see, it actually downloads the document instead of showing it in the screenshot above. Just shows a white space.
Code that works with another document:
I just found a pdf document on google, and put it into the tag, and it works. It shows the document in the embed, and doesn't download the document instead.
<a id="id2239" href="http://example.com:8080/client/attachment/filename.pdf" class="act01">filename.pdf</a>
<div class="fgh"><embed id="fgh" src="http://infolab.stanford.edu/pub/papers/google.pdf" type="application/pdf" width="400" height="400"></div>
Screenshot:
Question:
Why is the two examples different? Why does the internal document download, but the external document show embedded in the page?
How do i make it work with the file on our webservers as well?
Edit:
Screenshot of the pdf documents headings.
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.
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
Use the <object> tag to embed PDF files in html:
<object id="fgh" data="http://example.com:8080/client/attachment/filename.pdf" width="400" height="400"></object>
I'm building a very simple component in Vue to preview PDF files and images in a modal.
I'm using Vue Boostrap's modal component. In the body of the modal I have the following line:
<embed :src="fileSrc" type="application/pdf" height="100%" width="100%">
fileSrc is a prop that the component receives.
When the modal is launched, the PDF visualizer doesn't show and Google Chrome emits a warning saying:
Flash is blocked on this page
I have allowed flash to be displayed on the page but still doesn't work.
If I remove the type="application/pdf" attribute and the fileSrc is a JPEG file, it shows up just fine.
I've also tried with the <object> tag with no luck.
What should I check? What am I missing?
Edit: Why is this question not a duplicate?
Because I wan't to be able to use the <embed> tag to support not only PDF but also images for previewing. The examples in this page work without enabling Flash and without warnings, so I should be able to reproduce this behavior.
I found the answer.
The files I was trying to display with the <embed> were being uploaded to a bucket in AWS S3. When uploading the files (with a PHP script), the Content-Type metadata needed to be set accordingly to the file (i.e. application/pdf for PDF files).
The files were being uploaded with a default Content-Type value, thus the browser didn't know what to do with it once placed in a <embed> tag (the Content-type is used to determine which plugin to choose to display).
I found this method to be very easy to implement as a generic file previewer.
So this is quite the odd situation.... I have an iframe on a .cshtml page that is continuously loading the full content of the page that the iframe is on. This is the code for the iframe:
<iframe src="#Url.Content("~/dir/file.html")" width="100%" height="100%" scrolling="yes" />
The directory for the file is correct and the file.html file displays correctly without error when it is opened by itself. Also, I have tried using a different test.html file in place of file.html so the error cannot be within that file. Removing the iframe tag obviously stops this issue from occurring.
The other really interesting part about this issue is that I have a working version of the application that this .cshtml file belongs to and I have compared the corresponding .cshtml files and they are identical so I am really bewildered by this. Has anybody ever experienced a situation like this? The iframe literally just keeps reloading the .cshtml file within the iframe until I tell the browser to stop loading so you end up with a page with an iframe, that has a page withing the iframe, that has a page within the iframe, so on and so forth.
The answer to this question lies within the authentication for the application. When the iframe would make a call to file.html it would receive a redirect back to the .cshtml page which of course had the iframe on it so you can see where the loop comes into play. The solution of course then is to change the security settings to allow it to call to file.html as it needs to be displayed there. Thanks anyway.
I am really having a hard time opening up certain .pdf files within an iframe HTML element. I can open some .pdf files in this iframe, but not all of them. The ones that I cannot open were created by the Crystal Reports engine in Visual Studio 2010.
My source is simple and looks like the following:
<iframe src= "c:\jnk\EULA.pdf">
</iframe>
Is there any characteristic of a .pdf file that could prevent it from being displayed in an iframe? I am using IE8, but get the same results in FF. I also can perfectly display this .pdf file when it is not in an iframe.
IFrame isn't correct solution. You can use other solutions :
1 . <embed src="file:///C:\jnk\EULA.pdf" width="500" height="375">
2 . Download this library and use it.
I hope that I helped.
PS
Remember that when we use local file, we should write in prefix file:///
Sorry for my English
Based on a comment of yours, it sounds like your issue is one of permissions, unrelated to PDFs.
If I were you, I'd make sure that I can access the PDFs in my browser outside of any HTML. If that fails, you know you have a problem.
The code on the html page is:
View report in a new window
Once any user clicks on it, it becomes downloaded (it is a .png file) by his browser and he is able to view it.
How can we make it opened in a new window instead?
In anchor tag give the URL of the PDF embedded page and In the PDF Embedded page, try iFrame to display the PDF, It will work
PDF IFrame :
<iframe src="http://docs.google.com/gview?url=http://ocw.mit.edu/courses/mechanical-engineering/2-000-how-and-why-machines-work-spring-2002/tools/html.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
Fiddle : http://jsfiddle.net/RYh7U/69/
IMAGE IFrame :
<iframe src="http://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</iframe>
Fiddle : http://jsfiddle.net/RYh7U/70/
Q: Do you mean "getReport.php?id=123" isn't rendering as a .png image (it's asking the user to download)? Or is it displaying as an image, but you want it to display in a new, separate window?
If the former, you need to make sure the server sends the correct Content-type (e.g. "image/png").
If the latter, just do a Javascript "window.open()" (or equivalent)
======== UPDATE =======
My 1990's heritage with Javascript 1.2 is catching up with me :) Don't use "window.open()" - do as Pandian says and use if you want to implement a pop-up window. Here are more details:
http://javascript.info/tutorial/popup-windows
By the same token, your question is vague. If the problem is that the file is asking you to "download" (if the image isn't appearing anywhere), then your PHP program isn't sending the file correctly. At a minimum, it must set "Content-type" before it sends the binary .png data.
'Hope that helps...
View report in a new window