Saturday, December 22, 2012

Display Content (PDF, excel, word, Images etc) on your Visualforce Page

<apex:page controller="PreviewController" showHeader="false" sidebar="false" standardStylesheets="false"   >
  
<apex:form >

<script>
            function OpenDoc(docId){
                alert(docId);
                var htmlString = '<div id="chatterFileViewerPanel" class="chatterFileViewerPanel"><br/><br/> <embed height="500px" align="middle" width="500px" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.adobe.com/go/getflashplayer" allowfullscreen="true" allowscriptaccess="sameDomain" ' +'name="renditionLarge" bgcolor="#f3f3f3" quality="high" id="renditionLarge" '+'flashvars="shepherd_prefix=/sfc/servlet.shepherd&amp;v='+docId+'&amp;mode=chatterfilepreview&amp;in_tests=false" src="/static/101210/sfc/flex/DocViewer.swf" /> </div> ';
                         
                        document.getElementById('myDiv').innerHTML =  htmlString;
                        PrepareFlexComponent(docId);
                     
                     
                }
              
                function PrepareFlexComponent(docId){
                        insertFlexComponent('/static/102010/sfc/flex/DocViewer',
                                'shepherd_prefix=/sfc/servlet.shepherd&v='+docId+'&mode=chatterfilepreview&amp;in_tests=false','500px', '500px', '#f3f3f3', 'chatterFileViewerPanel', 'renditionLarge', false,{ adobeFlashVersionLbl : 'You must enable or download Adobe Flash Player version 9.0.115 or later to use this feature.', downloadAdobeLbl : 'Download Adobe Flash Player', downloadAdobeLinkLbl : 'Click the link below to download the Adobe Flash Player:', closeDialogLbl : 'Cancel'});
                                 
                        Ninja.Flex.ContentStaticResourcesBase = '/static/102010/sfc';
                        Ninja.Flex.ShepherdController = '/sfc/servlet.shepherd';
                }
        </script>
        <script type="text/javascript" src="/static/101210/js/functions.js"></script>
<script  src="/EXT/ext-3.0.0/ext.js" type="text/javascript"></script>
<script  src="/jslibrary/1294273133000/main.js" type="text/javascript"></script>
<script  src="/jslibrary/1289945557000/Chatter.js" type="text/javascript"></script>
<script  src="/jslibrary/1289346548000/ChatterFiles.js" type="text/javascript"></script>
<script  src="/jslibrary/labels/1295420058000/en_US.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/101210/desktop/desktopAjax.js"></script>
           
<script type="text/javascript" src="/static/101210/sfc/javascript/lib/AC_OETags.js"></script>

<script>

   function postSubDocument(url, internal) {
      var form = document.getElementById("formSubDocument");
      form.action = url;
      form.internal.value = internal;
      form.submit();
    }
           
    function hideFlex() {
        document.getElementById('IE6Confirm').style.display = "block";
    }
                  
    function showFlex() {
        document.getElementById('IE6Confirm').style.display = "none";
    }
                  
    function cancelDownload(url) {
        showFlex();
    }
                  
    function triggerDownload(url) {
        window.open(url);
    }
                  
    function downloadDocForIE6() {
        showFlex();
        triggerDownload(_url);
    }
                  
    function downloadDoc(url) {
        var isIE6 = (navigator.userAgent.indexOf("MSIE 6") != -1);
        if (isIE6) {
            _url = url;
            hideFlex();
        }
        else {
           triggerDownload(url);
        }
     }


  </script>
        <body>
       <div class="wrapper">
       <div class="clr"></div>
       <div class="main-index2">
      <!-- <div class="col-3">
           <c:SidePanel />
        </div>-->
     
       <div class="centerContent" id="myDiv"></div>
  
    <div class="clr"></div>         </div></div><div class="clr"></div>
    <input type="button" onclick="OpenDoc('068J00000000RszIAE')" value="click"/>
  
    </body>
  
 
    </html>
  
</apex:form>
<script>
    OpenDoc('{!$CurrentPage.parameters.id}');   
</script>
</apex:page>


// Pass the content Id in OpenDoc function. In this code I passed the Id from URL. 
PDF Preview

PPT Preview

13 comments:

  1. Hi Raj,

    Can you please let me know what static resources are required for this code to work in salesforce?

    Thanks in advance

    ReplyDelete
  2. Hello Gayathri, No need of any static resource. Just pass the id in the URL like -
    https://c.ap1.visual.force.com/apex/DocumentPreview?id=06990000000xVBG

    Thanks for showing your interest in my blog.

    ReplyDelete
  3. I am getting following error: This file has been deleted, doesn't exist, or can't be previewed

    Please can any one help me

    ReplyDelete
  4. Hi i'm getting the same error!! .The buttons work and the swf page flashes but never seems to load a document.ting the same error!! This file has been deleted, doesn't exist, or can't be previewed.

    Please help!

    Barry

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Hi, I'm facing the same problem stated above. Can someone give me an idea how to make it work in a custom vf page in the Content Object?

    ReplyDelete
  7. Hi Raj,
    I have used this code working fine but got a java script error as below..
    "ReferenceError: insertFlexComponent is not defined"
    Please help me...

    ReplyDelete
  8. Hi Raj,
    It's working on browser but not working on iPad.
    Any suggestion please..

    ReplyDelete
  9. Hi,
    Yet I have not tried on iPad,
    But, surely I'll try this and update you soon.
    Thanks

    ReplyDelete
  10. Hi

    I guess this doesn't work with the document record. Is that for chatter files? I mean should we need pass the contentversion id?

    ReplyDelete
  11. Hi

    Can we Zoom the Pdf file to exact fit inside the embed tag

    ReplyDelete
  12. Hi Raj,

    It works fine one classic environnement but is it possible to display this in community ?
    Could you give a hand please ?

    ReplyDelete