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/
Related
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>
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 have a Google Form embedded on a wordpress.org site using an iFrame.
The code I'm using is:
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdNU2bOyHaWD9YupFcq1gGXfOMwku3l38O0MIaqx9aQ9IXUpA/viewform?embedded=true" width="100%" height="4000" frameborder="0" marginheight="0" marginwidth="0">Carregando…</iframe>
My Google Account and my original file are in Portuguese and it shows so when I open the website using Firefox. However when using Chrome, it shows the "layout text" in English.
Is there a workaround for this?
Thanks!
I have a web page with an embedded iframe (iframe contents hosted under the same domain). Inside that iframe there is a link that is supposed to open a PDF file in a new tab when clicked.
iframe inclusion HTML:
<iframe src="./pages/ins_and_outs/ins_and_outs.html" width="100%" height="800" frameborder="0" id="ins-and-outs" target="ins-and-outs" sandbox="allow-scripts allow-top-navigation allow-popups"></iframe>
iframe:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
...
Open our infographic
...
</html>
Chrome version: 52.0.2743.116 (64-bit)
OS: OSX 10.11.2
Upon clicking the link to the PDF in Google Chrome, it opens a new tab showing a blank page but with the PDF's URL in the address bar.
I first thought it was an issue with the PDF itself, so I manually copy pasted its URL in the browser's address bar but found it displayed without issues.
I then went on and tested my page in Firefox, clicking the link there resulted in the PDF displaying correctly in a new tab.
I've also tried placing the link outside the iframe for test purposes, which works as well.
My conclusion is that it's a specific issue with having a PDF open in a new tab by clicking a link in an iframe, and only in Google Chrome.
Any ideas to what exactly is causing this, and what kind of solution would be possible?
What I'm doing as a quickfix now is adding the "download" attribute to the link, so it no longer displays the PDF but just downloads it.
<a href="./ins-and-outs/downloads/ins-and-outs.pdf" target="_blank" download>Open our infographic</a>
I found something! I know your question was 2 years ago, but if you use the sandbox "allow-popups-to-escape-sandbox" in your iframe, this will work.
Here is an example:
<iframe id="blue" src="iframe.html" sandbox="allow-popups-to-escape-sandbox"></iframe>
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%;" />