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

Posted by at

13 comments:

  1. AnonymousSeptember 10, 2013 at 3:54 PM

    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. UnknownNovember 21, 2013 at 7:05 PM

    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. AnonymousJanuary 1, 2014 at 10:51 PM

    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. AnonymousFebruary 19, 2014 at 1:27 AM

    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. UnknownApril 14, 2014 at 12:56 PM

    i am facing the same problem

    ReplyDelete
  6. LeeJune 28, 2014 at 1:48 AM

    This comment has been removed by the author.

    ReplyDelete
  7. AnonymousNovember 6, 2014 at 11:41 PM

    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
  8. AnonymousMarch 24, 2015 at 12:10 PM

    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
  9. AnonymousMarch 24, 2015 at 12:31 PM

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

    ReplyDelete
  10. UnknownMarch 24, 2015 at 3:33 PM

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

    ReplyDelete
  11. AnonymousApril 27, 2016 at 5:21 PM

    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
  12. AnonymousAugust 10, 2016 at 12:55 PM

    Hi

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

    ReplyDelete
  13. miounFebruary 22, 2019 at 10:34 PM

    Hi Raj,

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

    ReplyDelete

Subscribe to: Post Comments (Atom)