Download ppt - Display PDFs in SharePoint

- Display PDF’s in SharePoint

In this solution I will be illustrating how to display a PDF anywhere on a SharePoint page using the content editor web part.

Greg Gignac - SharePoint ConsultantMy SharePoint Portfolio

The complete solution provides;

•A quick & easy method to display a PDF inside SharePoint

•The standard Adobe header/frame for sizing and printing etc.

•The exact script to use in the content editor web part(CEWP) which provides the display engine and links the specific PDF




Solution Parts:

•The solution utilizes a PDF stored in a document library, the content editor web part, and script to automatically display and create the iFrame as pictured below.



The final solution will be display the pdf as pictured

Greg Gignac – SharePoint ConsultantMy SharePoint Portfolio


How to build instructions;

Step 1Upload any standard pdf file type into a SharePoint document library

Step 2Right click on the name of the pdf file name in order to copy the url location of the pdf document. Paste this url in notepad.




The url will be used inside the script to direct the web part to display that specific pdf.

Step 3Edit any SharePoint page, by clicking page then edit




Step 4Add a content editor web part to any zone on the page

Select “click here to add new content”




Step 5Once the add new content is selected it should activate the ribbon under Format Text. The HTML drop down should now be visible.

Note: If you do not see the HTML link it is because the ribbon is not referenced to the web part. Left click your cursor inside the web part or as pictured above to the right if the web part has already been added.

This will re-activate the HTML button in the ribbon under “Format Text”




Step 6Select “Edit HTML Source” from the dropdown. This will open a window titled HTML Source.

Copy and paste the script below in HTML Source;

<object width="850" height="1000" id="pdf_content" data"thePDFurl.pdf?#zoom=75&scrollbar=1&toolbar=1&navpanes=1" type="application/pdf" style="width: 850px; height: 1000px<>/object>

Replace the sample red pdf name with your pdf name that you previously saved to notepad.




Example script except with a relative url<object width="845" height="997" id="pdf_content" data="/h/Documents/yourpdf.pdf?#zoom=75&scrollbar=1&toolbar=1&navpanes=1" type="application/pdf" style="width: 818px; height: 997px"></object>

Step 7Save the page and the pdf should now be viewable in the iFrame



Solution Re-use:

This solution can easily be reused simply by downloading and then uploading the configured content editor web part to the web part gallery within SharePoint.

The only portion of the script that needs to be updated is the url link that references the specific pdf in the script.



Configuration Choices;

•The width and height of the iFrame can be adjusted by configuring the green highlighted script

•The scrollbar, toolbar and navpane can be hidden by replacing “1” with “0”

•Set the zoom as an integer(view percentage)

<object width="850" height="1000" id="pdf_content" data"thePDFurl.pdf?#zoom=75&scrollbar=1&toolbar=1&navpanes=1" type="application/pdf" style="width: 850px; height: 1000px<>/object>



This solution also works in Office 365!



The content editor web part(CEWP) with the script illustrated in these slides can be downloaded from my


on