Display PDF document (Salesforce document object) in Vf page with scrollbar 

 



-------------------------------Visualforce page------------------------------------------

<apex:page controller="pdfViewController" showHeader="false" >
    <apex:stylesheet value="https://cdn.jsdelivr.net/webjars/bootstrap-sf1/0.1.0-beta.6/css/bootstrap-namespaced.css"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
   
     <style>
     
     .top-right {
    position: absolute;
    top: 22px;
    right: 16px;color: #FFFFFF;
}

        .subBtn {
        margin-right:-22px;
        float:right;
        }
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
          /* IE10+ specific styles go here */ 
            .subBtn {
            margin-right:40px;
            float:right;
            } 
        }
     </style>
     


 
<!-- <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> -->

<apex:includeScript value="{!URLFOR($Resource.pdfjs, '/build/pdf.js')}"/>

<script type="text/javascript">
    var base = '{!pdf}';
    var pdfData = atob(base);
    function renderPDF(url, canvasContainer, options) {
        var options = options || { scale: 1.5 };
        
        function renderPage(page) {
            var viewport = page.getViewport(options.scale);
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
                };
        
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            canvasContainer.appendChild(canvas);
            page.render(renderContext);
        }
    
        function renderPages(pdfDoc) {
            for(var num = 1; num <= pdfDoc.numPages; num++)
            pdfDoc.getPage(num).then(renderPage);
        }

        PDFJS.disableWorker = true;
        PDFJS.getDocument({data: pdfData}).then(renderPages);

    }   
</script>
 

<body style="background-color:#d2dbe0;">
    <apex:form >
        <div class="bootstrap">
            <div style="background-color:#d2dbe0;">
            <div>
                <apex:image id="theImage" value="https://c.eu5.content.force.com/servlet/servlet.ImageServer?id=01524000001XG0s&oid=00D24000000e4Gc&lastMod=1474615125000" width="100%"/>
                <div class="top-right" style="right: 55px;top: 28px;font-family: Arial, Helvetica, sans-serif;"><b>{!dealerName}</b></div> 
            <apex:image value="https://c.cs88.content.force.com/servlet/servlet.ImageServer?id=0159E000000IDtY&oid=00D9E000000D1fA&lastMod=1520397060000" styleClass="top-right"/>
             
            </div>    
                <div class="row" style="height: 100%;width: 100%;">
                    <apex:actionFunction name="checkSession" action="{!checkSessionValidity}" />
                    <div class="col-xs-offset-2 col-xs-8" style="height: 100%; margin-bottom:35px;">
                                <label class="control-label" style="font-size: 16pt;padding-top:20px;"><strong>TERMS & CONDITIONS</strong></label>
                                <br/><br/>

                                <div id="holder" style="color:#0e0000;overflow:scroll; height:450px; width:905px"></div>

                                <script type="text/javascript">
                                    renderPDF('sample.pdf', document.getElementById('holder'));
                                </script>
                                <!--    <apex:commandLink value="Bulletin" onclick="openPdfPage();" styleClass="pull-left" style="font-size: 18px;padding-top: 5px;"/>  -->
                                 
                            <div class="subBtn">
                                    <apex:commandButton value="Decline" action="{!logout}" style="margin-left: 3px;margin-top:10px;" styleClass="btn btn-danger pull-right" />
                                    <apex:commandButton value="Accept" style="margin-left: 3px;margin-top:10px;" styleClass="btn btn-success pull-right" action="{!openCRAPage}" oncomplete="checksessionOnApply();"/>
                            </div> 
                                
                    </div>
                </div>
            </div>
        </div>
    </apex:form>
</body>
</apex:page>


------------------------------Controller Class----------------------------------------



global with sharing class pdfViewController {

global string dealerName {get;set;}

global PageReference reRend;  
    public pdfViewController() {

dealerName = System.currentPageReference().getParameters().get('dName');

    }


  public Document doc{
        get {
            if (doc== null) {
                doc= [SELECT id,Body, ContentType FROM Document WHERE ID =:Label.Bulletin_Document];
            }
            return doc;
        }
        private set;
    }
    public String pdf {
        get {
            return EncodingUtil.Base64Encode(doc.body);
        }
    }
    
global ApexPages.PageReference openCRAPage() {

/*
string strToken = System.currentPageReference().getParameters().get('token');
string DlrId = System.currentPageReference().getParameters().get('Did');
string strDName = System.currentPageReference().getParameters().get('dName');

reRend = new PageReference('/apex/CRARemovalList');
reRend.getParameters().put('token',strToken);
reRend.getParameters().put('Did', DlrId );
reRend.getParameters().put('dName', strDName);

reRend.setRedirect(true);
return reRend;
*/
}   
    
}

Comments

Post a Comment