Iframe not displaying the PDF - javascript

I have a link when pasted it would display as PDF
But when I embed in iframe its not displaying and refusing to connect.
I have tried with
<iframe src="https://docs.google.com/presentation/d/1s5kA0DXmxUGZ7Ydjk3Aa-wu7xhKyInM3s7p19XUfaFU/export/pdf?id=1s5kA0DXmxUGZ7Ydjk3Aa-wu7xhKyInM3s7p19XUfaFU&pageid=g9fbb3c24c3_0_71&attachment=false" title="IFRAME">
</iframe>

I realized that, when ceratin URLS have a XFRAME as sameorigin they don't allow to embed via iframe. Its evident here.

Make sure you have public access to view the pdf file. You can also use the Object tag to view pdf if the user has the pdf plugin installed. else it will display a Google doc file.
<object data="https://docs.google.com/viewerng/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true">
<iframe src="https://docs.google.com/viewerng/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" frameborder="0" height="100%" width="100%"></iframe>
</object>

Related

Is it possible to change HTTP-header of a pdf document, you want to embed in a <embed> or <iframe>?

Refering to my other question: Why does pdf document download instead of showing in a embed/iframe?
When i embed a pdf document like the below examples, it downloads the documents instead of showing it embedded in the website.
<embed id="showPdfDocument" src="http://example.com:8080/client/attachment/filename.pdf" type="application/pdf" width="400" height="400">
or
<iframe id="showPdfDocument" src="http://example.com:8080/client/attachment/filename.pdf" style="width:400px;height:400px;"></iframe>
My assumptions:
I guess i have to change the HTTP-Header of the pdf document?
I also guess that the problem is with the field "Content-Disposition: attachment", as shown in the screenshot below
My question:
How can i change the HTTP-Header of the pdf document, using html/javascript only? (Greasemonkey for example)
Screenshot of the HTTP-Header of the pdf document:
("Chrome Dev-Tools(F12)" -> Network Tab, select the pdf document and check the response headers)
The content-disposition header triggers the save dialog. If you want to avoid it without server-side changes, try loading it via XHR and encode it as "data:" link.

Can I export iframe to pdf with javascript

I am need export pdf a iframe in javascript but it have token authorization, I can not obtaing a html.
<iframe type="application/pdf" width="600" height="373.5" src="https://app.powerbi.com/view?r=eyJrIjoiNjk1MzdjNmQtZThmYi00MjQwLWFiODItZTlhZTJiZWJiODU1IiwidCI6IjQyZDlhY2FhLTVhYTItNDhiMy04MDgxLTRlMTgzODdmMWVkNSIsImMiOjF9&pageName=ReportSection" frameborder="0" allowFullScreen="true">
</iframe>
Though there are -ridiculously intricate and inefficient- ways to do so, seeing that what you are trying to produce as PDF is a Power BI report/view, the best way to do it is to use PowerBI Export API
Detailed instructions and manual can be found here:
https://powerbi.microsoft.com/en-us/blog/export-report-to-pdf-pptx-and-png-files-using-power-bi-rest-api/
You may need a Javascript library for this. Check out JSPDF: https://github.com/MrRio/jsPDF.
You could also look at this post: Using jsPDF to create a PDF from an iframe

How to view a pdf using iframe from my website?

I have pdf files on my website that I would like to show on a page , I tried :
<iframe src="https://mywebsite.com/files/file.pdf" frameborder="0" width="600" height="550" style="margin:0px; padding:0px;"></iframe>
but the file is downloaded.
I tried using google drive :
<iframe src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://mywebsite.com/files/file.pdf" ></iframe>
But I get the html of my login page , I think it automatically redirects to login page.
and I tried to use iframe to access the folder that contains the file:
<iframe src="https://mywebsite.com/files" ></iframe>
But I get forbidden message that tells me to edit my file permissions .
-Is there is a specific permission that I could use to access the folder or the file?
-Is there is a library , function in any web developing language or anything that could help?

Opening a local pdf file in iframe with javascript

I am using the below code to open a pdf file but its not working-
<iframe src="file:///C:\Users\Downloads\0895custbill08132015.pdf" style="height: 638px;" frameborder="0"></iframe>
For a google doc the below code is working fine, I am not sure what is required to open a locally saved doc.
<iframe src="http://docs.google.com/gview?url=http://webshire-aioopsss.com/pdfs/sample_contract.pdf&embedded=true" style="height:638px;" frameborder="0"></iframe>
Most browsers won't let you open a locally stored file from a website for security reasons. Typically I will host the file on an IIS server and then retrieve it from there (which is what you're doing when you're retrieving it from googledoc).
You are using backslashes in your src. Please change them to slashes
<iframe src="file:///C:/Users/Downloads/0895custbill08132015.pdf" style="height: 638px;" frameborder="0"></iframe>
You can use
var pdf = $('\<\object type="application/pdf">');
pdf.attr('data', "you pdf scr");
append it in your iframe..

How to removes a link from iframe

I hvae iframe code like this
<iframe id="iframe" align="left" style="background-color:#000000" src="//third party url" frameborder="0" height="85" width="300" scrolling="no">
Now it generates a link inside body.& i want to remove a link from that.
Any suggestions??
If the iframe src points to another server than yours, you cannot alter its HTML (the cross-domain restriction).
You can however hide the link by Javascript or CSS if you can control somehow the third party server (a method named JSONP).
You can't do that from the Javascript as it is from external site. Alternately you can do it from server side (either PHP/ASP.NET or others) using CURL or respective syntax to read the content and change before serving. It should work without any issues.

Categories