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>
Related
I am using HTML with JSF application in my project and also used ClickJack filter option. First I try iFrame, Object, embed for view pdf portion. I refer path in tomcat folder
<iframe src="/path/file.pdf"/>
at the time browser to show error message is To help protect the security of information you enter into this website,
the publisher of this content does not allow it to be displayed in a frame..
So I need any other way to display pdf or doc file in browser is possible?
Chrome, Edge, and other modern browsers can read PDF files within the browser natively. If you use a link like so:
My PDF
It should open a window like this:
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.
I am using an <iframe> to display a text file:
<div class="document-view">
<img src="img/302.GIF" />
</div>
$(window).load(function () {
<s:if test="extention.equalsIgnoreCase('txt')">
element = '<iframe class="iframe" src="/dmsrepo/<s:property value="docLocation"/>" />';
</s:if>
$('.document-view').html(element);
});
When I inspect element in the browser I can see the file location.
<iframe class="iframe" src="/dmsrepo/Legal Doc Type/LegalDocType_123456789_1.0.txt" />
But the text file is getting downloaded in Chrome, Firefox and IE.
How to resolve this issue?
EDIT: you can reproduce the behavior in the following fiddle, that strangely affects only Firefox, for every page load after the first one.
Simply open the page, then press Run.
Note: it affects also the first load if Firebug Net module is activated.
This is the issue with the file. it is not formatted as html. because it has some special unicode (eg) characters at end of file read. if text response has special character like that. it failed to parse response as html embedded in iframe.
you can check this example :
<iframe src='http://humanstxt.org/humans.txt' /> </iframe>
because browser understands only html. Change your file extension to .html
or use server side language like php and using file_get_contents() function, you can display text file to browser.
to display file add below line(s) in .htaccess
AddType text/plain .txt
AddType text/plain .log
This is signal Firefox that you don't have to download the file instead view file as plain text.This technique can be applied to all the files that you need to view instead off download.
The Content-Disposition response header could be the culprit. If set to attachment; filename="..." then the file will download. If set to inline then it can displayed in the Web page.
If you are serving these files from Amazon S3, you can add Metadata to the file with the Key=Content-Disposition and the Value=inline.
Note: the default value is typically inline.
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
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.