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.
Related
Is there a way to have an iFrame with full toolbar except for the download button.
On the web I found this solution
<iframe src="URL#toolbar=0" width="100%" height="100%"></iframe>
But as u know it removes completely the toolbar and I would love to actually keep it.
Basically:
this is how is normally and this is I would love to have it (or something similar).
I already know i cannot prevent ppl to download it in other way, but I'm only interest in this graphic difference
Thanks to anyone who could help me
Also I noticed that mozilla doesnt view iFrame, is there a way to allowed it or something similar?
I need something that ppl can use without changing configuration on their personal mozilla
The look that I'm looking for (asked by my boss) ->
Mozilla browsers have no problem with Iframe, but browsers are configured by users to their security preferences.
<iframe id="page2" height="50%" width="100%"src="http://africau.edu/images/default/sample.pdf#page=2"></iframe>
<iframe id="page1" height="50%" width="100%"src="http://africau.edu/images/default/sample.pdf#page=1"></iframe>
Same as the web page text and images, Audio or Video content, all pdfs are "Download first to view" does not matter if
A=Href
Embed
Iframe
Object (avoid as depreciated)
cUrl (Users direct get)
So why remove the button if its not showing in the frame due to any ad blocker or other user setting such as send downloads into external secured PDF viewer
Mozilla browser with pdf plugin or add-in or PDF extender same as Chrome/Edge
FireFox with a frame blocker active for the same page 3 blocked items.
If you wish to change the Iframe view you need to be the PDF viewer application, but there is no guarantee it is the one the user is viewing within.
Here is a demo of a browser viewer where the download and print buttons are removed. However Browsers need to allow the user to control their own view so I have also opened the download on the right in a companion viewer.
A PDF client cannot view a PDF unless it is Decrypted after a download thus their copy is available for view and edit.
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.
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 just want to know which file types (like .png, .pdf, .txt) can be viewed in browser (like Chrome, Firefox). Because sometimes when i click on file link, instead of displaying in browser it download automatically. Why this happens ? Below is my code. Any help will be appreciated.
<script>
function openPDF(url){
var w=window.open(url, '_blank');
w.focus();
}
</script>
<a href="burger1.jpg" target='_blank'>link</a>
<div onclick="openPDF('1.pdf');">PDF 1</div>
It indeed depends on several factors:
the server response Content-Disposition header value inline (open it) vs attachment
(classic download)
the browser configuration (how to behave for various file types)
installed browser plugins
the ability of the browser to open the file
A detailed technical explanation can be found here: https://superuser.com/questions/1277819/why-does-chrome-sometimes-download-a-pdf-instead-of-opening-it
For example Firefox can open most PDF files (but generally not advanced forms, encrypted files ...),
https://support.mozilla.org/en-US/kb/view-pdf-files-firefox
https://support.google.com/chrome/answer/6213030?hl=en
https://helpx.adobe.com/lu_en/acrobat/kb/open-in-acrobat-reader-from-chrome.html
https://www.investintech.com/resources/blog/archives/3684-view-pdf-files-mozilla-firefox.html (about browser PDF reading)
Most advanced PDF features will require the user of Acrobat Reader or a special Acrobat Reader plugin.
There are two aspects to this issue.
There are addons you can add on to the browsers to allow viewing virtually anything in the browser window. In the case of PDF, for instance Firefox can't show those by default, but you can install an addon. Or, there are standalone PDF viewers that also come with such an add-on which you can activate if desired.
And when you've done that, as noticed in the comments, if the resource is marked as download, the browser will download it instead of trying to open it, no matter the file type.
Ditto if it has a http header of Content-Disposition: attachment.
So don't use that.
In normal cases, following files can be viewed in browser.
.PNG
.JPEG
.PDF
.doc
etc ...
and following files will always be download.
.zip
.exe
etc ...
But in special cases, it depends on user browser settings and preference. You can get further details from this link.
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.)