I am using embed tag to display pdf from a web src just like this
<embed src={'http://www.somePDF.com/file.pdf'} type="application/pdf" width={"100%"} height={400} />
the problem is that in Safari is displaying the pdf correctly but in chrome is automatically dowloaded and I cannot see it in the page, for more details i am using react.js
From Mozilla (FireFox)
Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon <embed> is generally not wise if you want your site to be operable on the average user's browser.
For current view on the relationship by chromium see https://bugs.chromium.org/p/chromium/issues/detail?id=1257611
A pdf is application/executable binary (like docx with macros) i.e. may contain JavaScript. A secured browser should not run a pdf it should offer to ignore or download it to a sandbox for neutering.
How a PDF should be displayed in a secure browser, based on Chrome code base.
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 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:
We have an app which launches Electron browser. In the Electron browser we load a third party website which has a link.
When we view this site in the Chrome or IE browsers, clicking on this link it renders a PDF in an iFrame but for electron browser it shows a save file dialogue. We want to display this PDF in the electron browser just the same way it works for Chrome and IE. As it is a third party website we don't have control over rendering or loading PDF file or we are not getting any events related with loading of this PDF.
For this scenario, if there is no way to display PDF in electron then it is OK to block it so the Save file dialogue will not show.(This app is actually in the KIOSK so we don't want to save a file if it doesn't render in browser.)
Thanks in advance for your comments!
Here is a discussion on an issue almost identical to yours. The answer does a decent job explaining why the download option is appearing. As for preventing the pdf from being downloaded, try using the <embed> tag as it detects compatibility. So embed the pdf using that tag and then load the html into the <iframe>. Here is some example code and description of how to set that up.
Trying to embed a pdf on my website like so:
<iframe src="filename.pdf" type='application/pdf' frameborder="0"></iframe>
The website is a rails site, and currently I'm only running it on a local server.
The problem is that the pdfs render with a toolbar on top and a sidebar with my adobe creative cloud account information, as seen in the picture below (the actual content of the pdf displays in the white box under the toolbar and to the left of the sidebar)
How can I get the pdf to render alone, without the menu and sidebar?
If you allow the browser to choose how the PDF gets rendered, you're never going to be able to create a consistent experience for your users unless you are in a controlled desktop environment.
If you are looking for a consistent experience, use pdf.js to render the PDF in the browser.
If you are in a controlled environment and all of your users have a browser/viewer combination that will let the browser show PDF using the Adobe Reader plugin (as your screen shot shows) then you can use the "open parameters" at the end of the URL to control what gets shown. See the documentation at the link below.
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
That said, don't count on that solution to work for very long. Most modern browsers are not allowing the viewer plugins to function anymore and the rest are moving in that direction.
Searching more into stack, try that:
https://stackoverflow.com/a/2105095/7741129
For more detailed informations:
http://blogs.adobe.com/pdfdevjunkie/web_designers_guide
I think it's better use some kind of JS stuff just in case of cross-browser issues, like related into first link. Solutions like https://pdfobject.com/ it's helpful to get the job done. Look:
PDFObject 2.0 detects browser support for inline/embedded PDFs. (In
case you were wondering, your browser supports embedded PDFs. You
lucky dog, you!)
If you're working with dynamic HTML, such as a single-page web app,
you may need to insert PDFs on-the-fly. However, PDF embedding is not
supported by certain browsers. If you insert markup without first
checking for PDF support, you could wind up with missing content or a
broken UI.
The PDFObject utility helps you avoid these situations by detecting
support for PDF embedding in the browser; if embedding is supported,
the PDF is embedded. If embedding is NOT supported by the browser, the
PDF will NOT be embedded.
By default, PDFObject 2.0 inserts a fallback link to the PDF when the
browser does not support inline PDFs. This ensures your users always
have access to your PDF, and is designed to help you write less code.
The fallback link can be customized, or the option can be disabled if
you prefer.
PDFObject 2.0 is npm-ready. Modern web apps use npm to manage packages
and dependencies. PDFObject 2.0 is registered with Node Package
Manager (npm) and can be loaded dynamically.
PDFObject also makes it easy to specify Adobe's proprietary "PDF Open
Parameters". (Be warned these parameters are only supported by Adobe
Reader, most PDF readers will ignore the parameters, including the
built-in PDF readers in Chrome, Internet Explorer, and Safari. Read
more below.)
I have the following code in a html document:
<p>PDF sample</p>
<object data="http://www.whateverdomain.com/whatever/~/media/sample.pdf" type="application/pdf"></object>
This is working in IE, Firefox but not in Chrome. Appears a grey box in the browser with no embedded pdf. When I check on "network" tab in chrome I'm receiving a HTTP 200 response but PDF is not shown.
I tried URL encode tilde "~" symbol replacing it by %7e but still its not working on Chrome.
I don't have the possibility of changing the url which is provided by an external service.
Do you have any clue on how to solve ?
You might wish to try and use a simple iframe. At the very least I am pretty sure that works for chrome, might not work for IE though. Another alternative is using the Google Docs viewer, with that you are sure to be cross browser compatible, although some pdf's might not render perfectly. The last option you have is using something like pdf.js to render the pdf's yourself inside the browser. Gives you a lot of control and ensures that even people running computers without a pdf viewer installed (or a native pdf viewer like chrome and firefox) will be able to view the file.