Office 365 Open PDF files in the browser

   A very useful Post from Office Community forum
1) Step 1:Download pdf icon and name it as ICPDF.gif

http://www.iconarchive.com/show/soft-scraps-icons-by-deleket/Adobe-PDF-Document-icon.html


2) Step 2: Copy & Paste the below script in notepad (or
any editor of your choice) and save it as javascript file. For example
'jPDFViewer.js'

<html>
   <head>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

 </head>
    <body>
    <script type="text/javascript">
  
    //The script will run after the page is loaded
    ExecuteOrDelayUntilScriptLoaded(Page_Load,"SP.js");


    // Load the page.
    function Page_Load() {
        try
            {
                //setting icons
                var $pdficons = $("td[class='ms-vb-icon'] img[title$='.pdf']");

                $pdficons.each(function(index)
                                {
                                  
var siteCollectionUrl = document.location.protocol + "//" +
document.location.host + _spPageContextInfo.siteServerRelativeUrl;
                                    var pdfImgLoc = siteCollectionUrl + "/SiteAssets/scripts/ICPDF.gif";
                                    $(this).attr({src: pdfImgLoc});

                                }
                               );

                //assign javascript for the pdf files
                var $items = $('.ms-vb a[href$=".pdf"]');
                $items.each(function(index)

                                {
                                  
var $itemURL =  document.location.protocol + "//" +
document.location.host + $(this).attr('href');
                                    $(this).removeAttr("onclick");
                                    $(this).unbind("click");

                                    $(this).attr({
                                            onclick: "javascript:OpenPDF('" + $itemURL + "')",
                                            onmousedown: "return VerifyHref(this,event,'0','AdobeAcrobat.OpenDocuments','')"

                                        });                             
                                 }
                            );
            }
            catch (e) {
                alert(e.message);

                }
        }

        function OpenPDF(itemPath) {
           document.write("<embed id='PDF' width='100%' height='100%' src='" + itemPath +"' type='application/pdf' />");

        }
    </script>     
    </body>
</html>


3) Step 3:  Save and upload the jQuery file & the PDF icon file. In this example I've uploaded the files under the 'scripts' folder of 'Site Assets' library in the site collection. - "SiteCollection/Site Assets/scripts".  (Check the green shaded color in the script)



Check the screen shots on how to enable the pdf via Content Editor Webpart.



Click on 'OK' and you should see that pdf icons are populated for the PDF files and when clicked it should open in the browser.



P.S: Make sure that you have installed the latest Adobe Acrobat Reader.

0 comments:

Post a Comment

Popular Posts