[SalesForce] iFrame inside a visual force page is not scrollable

I have a pdf which i retrieve from the back-end and embed the application/pdf – content type onto the VF page in an iFrame but currently i am facing this issue where my iFrame is not scrollable. Currently i am unable to view the whole pdf file on the Salesforce 1 (mobile) platform inside the iframe as it is not scrollable but can view it on the desktop (web-browser) . Here is the code which i have written please suggest me how can i dynamically increase the height of the iFrame for responsive design on different devices.

**

<apex:page docType="html-5.0" standardController="ZInvoice__c" extensions="InvoicePDFController" sidebar="false">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    </head>
   <div id="ad" style="overflow:scroll !important ;-webkit-overflow-scrolling:touch !important;">
        <iframe src="data:application/pdf;base64,{!file}"  id="theFrame" width="100%" />
 </div>
    <script type="text/javascript">
    var content_height = document.body.scrollHeight-80;
    var iFrame = document.getElementById('theFrame');
    iFrame.style.height = content_height+"px";
    console.log(iFrame.style.height)
    </script>       
</apex:page>

**

How can i view the entire pdf content inside the iFrame on iPad or iPhone ast he same thing works on desktop version ?? My above code does not display the pdf neither is the iFrame scrollable to view the entire pdf content?

Best Answer

I found something which may lead you to the solution to your issue, its a post on StackOverflow, recommended way to embed pdf in html. There were so many answers to the question, that I couldn't possibly begin to summarize all of the those that were recommended. I can say however that the top solution was a Js/Html5 solution which was to try pdf2htmlEX from it's Git repository at github.com/coolwanglu/pdf2htmlEX. I hope that solves your issue.

Related Topic