CODEWITHSUNDEEP
javascriptphpgoogle-chromepdf.js
Vahe Galstyan
Vahe Galstyan

Reputation: 1731

Google chrome does not show PDF files in iframe

I use Pdf.js, I get base64 file from web service (this.attachmentSource), and when I want to add var iframe = "<iframe width=800 height=550 src='" + this.attachmentSource + "' > </iframe>",For some pdfs in google chrome I get iframe empty, but in Mozila everything work fine, who can explain this mystery?

Upvotes: 4

Views: 17687

Answers (5)

Surya R Praveen
Surya R Praveen

Reputation: 3745

Remove attributes if present with

<iframe allow="clipboard-write"
sandbox="allow-top-navigation allow-top-navigation-by-user-activation allow-downloads allow-scripts allow-same-origin allow-popups allow-modals allow-popups-to-escape-sandbox allow-forms" allowfullscreen="true" src="http://assets.google.com/document.pdf">

<iframe src="http://assets.google.com/document.pdf" allowfullscreen="true">

Upvotes: 0

Max Reeder
Max Reeder

Reputation: 179

I happened to notice: server Response Header:

x-frame-options: DENY

The DENY option is the most secure, preventing any use of the current page in a frame. More commonly, SAMEORIGIN is used.

I was using AWS CloudFront with a Lambda@Edge function already, so I found a solution here: Configuring X-Frame-Options Response Header on AWS CloudFront and S3

If you are using a different server stack, you will have to adjust your server response headers accordingly.

Upvotes: 5

Chris Lacaille
Chris Lacaille

Reputation: 167

I was having the same issue when trying to embed a PDF. I tried both an <iframe> and <embed> approach, but they still wouldn't open in Chrome.

The solution for me was opening the PDF in Adobe Acrobat and under the "Protect" tab, select "Remove Hidden Information". I didn't create this PDF, so I am not sure which policy, etc was causing the issue.

Hope this helps!

Upvotes: 0

anis programmer
anis programmer

Reputation: 999

I tracked down the issue The iframe is being block by chrome detecting insecure content and blocking the iframe from loading. this only occurs when using Chrome, IE Firefox, Safari on PC work fine. Safari and Chrome also work fine on the iPad. It appears Chrome on PC has a different set of rules and blocks the content. Selecting the shield in the URL title bar allows the content to be displayed. Pressing Ctrl shift J gives some information about what content is being blocked. wouldn't it be nice if all the browser followed the one set of rules

Upvotes: 4

schaturv
schaturv

Reputation: 122

iFrame doesn't support most of the things. For ex: if you have graphs in your application it won't be displayed.Use embed or object instead.

<object data="{{srcUrlTrusted}}" width="100%" height="800">
    <embed ng-src="{{srcUrlTrusted}}" width="100%" height="800"> </embed> 
</object>

Upvotes: 0

Related Questions