I'm trying to display a base64 encoded pdf. In FF and Safari the code below displays the pdf in a viewer, however in Chrome the page loads, space is created for the iframe, but the iframe doesn't display.
<apex:page controller="SomeController">
<apex:iframe src="data:application/pdf;base64,{!pdf}"></apex:iframe>
</apex:page>
I have verified that I can indeed view PDF files in Chrome on other webpages and that the Chrome PDF Viewer plugin is enabled.
This ended up working, though our dev team swears that when this was tried initially it didn't work:
<apex:page controller="SomeController">
<object>
<embed src="data:application/pdf;base64,{!pdf}" height="800" width="1200"/>
</object>
</apex:page>
Of course there is the issue that object isn't supported in earlier versions of IE, but at least it works in chrome now.
This worked for me with angular js
<embed ng-src="{{NewDocumentData_PDF}}" height="800px;" width="100%;" />
Related
I have an iframe with a src attribute set to a https pdf link. On firefox (99.0.1), my iframe displays correctly the pdf, but not on google chrome (101.0.4951.54). I have no extension installed on my google chrome, and found no errors or any logs in the console.
Chrome gives me a grey iframe like that:
(in english it says "This page has been blocked by Chrome")
I've went into the console, inside the network tab and here is the only useful information I've found:
I had the same issue but only on CodePen, which is displaying everything in an iframe, which was probably causing problems.
Once I created my own html file, everything was working correctly.
Both codes work correctly:
<embed
class="pdfobject"
type="application/pdf"
title="Embedded PDF"
src="https://africau.edu/images/default/sample.pdf"
style="overflow: auto; width: 100%; height: 100%;">
and
<iframe src="https://africau.edu/images/default/sample.pdf" width="500" height="375" />
Alternatively, you can used PDFObject package - "An open-source standards-friendly JavaScript utility for embedding PDF files into HTML documents."
https://pdfobject.com/
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 have a PDF file embedded into a standard html web page.
<h3>Foo</h3>
<object id="foo" data="bigboundingbox.pdf"
type="application/pdf"
classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"> </object>
This currently renders in Internet Explorer using the Adobe Reader plugin on windows. Firefox and Chrome appear to be using their internal PDF rendering engines.
In all 3 cases the page displays with the Foo header visible above the contents of the PDF.
When a user tries to print the page (File->print), the PDF being rendered does not display in the resulting printed document in Internet Explorer or Chrome.
Firefox appears to display correctly.
I have tried using PDFObject in order to embed this with the same result
There are other posts recommending using PDF.js etc.. however I must support IE 7 and IE 8 and PDF.js will not work at all with 7 and works with limited success with 8.
Does anyone know why this happens and if there is anything i can modify so that it will print ?
You can use fpdf for that. Have a look at fpdf here
I've been trying to solve that problem since yesterday with no success. I could be missing something simple however I can't see it.
The problem I have is that Safari on Windows instead of rendering a svg image it opens a download dialog box. The website is hosted on IIS 7. I have set the MIME in the web.config as below.
<mimeMap fileExtension=".svg" mimeType="image/svg+xml svg"/>
And embedded the image as following:
<div style="width:128px; height:128px;background:grey;">
<object height="100%" width="100%"
data="/images/l-tree01.svg" type="image/svg+xml">
</object>
</div>
The path to the image is correct, the image renders well on the Firefox, Chrome and IE.
Eventually have solve the problem by examining response HEADERS of properly embedded image on another site. The issue was that the MIME I've declared was Content-Type: image/svg+xml svg instead of Content-Type: image/svg+xml.
I have enabled Chrome PDF Viewer but the PDF files are still being downloaded. How do I stop this and view these PDF files within Chrome?
<embed src="http://test.com/cool.pdf" width="500" height="750">
this will embed a pdf in your html. chrome and other browsers would show the pdf as a part of the page. Thus browsers won't download it.