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.
Related
My Blazor web application needs to display a pdf document. It works in Firefox, but not in chrome. Here is the code:
<embed src="data:application/pdf;base64,#QuoteModel.Base64EngineeringDrawing" style="overflow:auto;width:800px;height:1000px" />
The document is stored in the variable Base64EngineeringDrawing.
Here is how it looks in Firefox:
But in Chrome it is empty. The inspection shows
Replacing embed with iframe does not help.
How can this be fixed?
The correct use of iFrame is along the lines of
<iframe height="500" width="500" src="http://google.com"></iframe>
Note the separate terminator that is not the one used for <embed />
When using Iframe with embedded datauri: there can be server system and client browser limitations so first test a file under 10KB and then again ensure a test file is under 1.5MB as those can be common hurdles/blockers.
For PDFs especially as application format, every browser handling of PDF data is different depending on html construction and user settings. Hence the recommended method is provide an optional image of preview thumbnail with <a href="filename link" for download as inline viewing is down to the client preferences.
Usually my settings in Edge and other browsers is ask, what to do with incoming PDF
In Firefox on Windows an iFrame with base64 data should offer options like this
Edge may not offer user control, when its set to default PDF viewer and may display the frame instantly
If I use Palemoon or Waterfox (Firefox based) the frame is blank as I prefer for most PDF downloads and opens either inline or off line in SumatraPDF (depending on page construction)
different constructs may behave differently in recent Firefox as there was a security related change around/after version 97.
I am using the following code to display a PDF document in an HTML element.
<embed src="PDFURL" type="application/pdf" width="100%" height="474px" />
Whenever the code is run in Firefox it works perfectly, however when run in Chrome it returns this error in the console:
"Failed to load 'PDFURL' as a plugin, because the frame into which the plugin is loading is sandboxed."
I have changing "embed" to "object" and "iframe" but neither have worked. Is there a solution to get it to work in Chrome?
One possible reason for this problem is the Content Security Policy “sandbox” header.
sandbox
Enables a sandbox for the requested resource similar to the iframe sandbox attribute. The sandbox applies a same origin policy, prevents popups, plugins and script execution is blocked.
(The whole description can be found under https://content-security-policy.com/)
Unfortunately, the only possible way to get this working is to remove the sandbox value from Content Security Policy. Because there is no possible value to enable plugins.
The sandbox header works the same way as the sandbox attribute for iframe. See also Flash not work in iframe within sandbox attribute
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:
iframe src="https://127.0.0.1/test/helloworld.pdf" height="100%" width="100%"></iframe>
I'm working on a Web Application (jsp) project where it will display the pdf content using Iframe on the web page. However, the file is situated on other remote server/file server. Is there a way for me to retrieve a file from other server and display on my Web Application via iframe?
Doubt it. Opening PDF in your browser - is your browser settings. If my browser can't open PDF in browser - i can't see it.
Look this question on StackOverflow
I just found the solution on this, we can write a java to read the PDF file from remote server and encode it to base64 string. Then, display it on the iframe src.
<iframe src="data:application/pdf;charset=utf-8;base64,-basepdfstringOutput-></iframe>
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.