These slides illustrate how to display PDFs in SharePoint using the content editor web part.

1. - 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 Consultant
My SharePoint Portfolio

2. - Display PDF’s in SharePoint
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
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio

3. - Display PDF’s in SharePoint
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.
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio

4. - Display PDF’s in SharePoint
The final solution will be display the pdf as pictured
Greg Gignac – SharePoint Consultant
My SharePoint Portfolio

5. - Display PDF’s in SharePoint
How to build instructions;
Step 1
Upload any standard pdf file type into a SharePoint document library
Step 2
Right 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.
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio

6. - Display PDF’s in SharePoint
How to build instructions;
The url will be used inside the script to direct the web part to display
that specific pdf.
Step 3
Edit any SharePoint page, by clicking page then edit
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio

7. - Display PDF’s in SharePoint
How to build instructions;
Step 4
Add a content editor web part to any zone on the page
Select “click here to add new content”
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio

8. - Display PDF’s in SharePoint
How to build instructions;
Step 5
Once 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”
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio

9. - Display PDF’s in SharePoint
How to build instructions;
Step 6
Select “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&amp;scrollbar=1&amp;toolbar=1&amp;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.
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio

10. - Display PDF’s in SharePoint
How to build instructions;
Example script except with a relative url
<object width="845" height="997" id="pdf_content" data="/h/Documents/yourpdf.pdf?
#zoom=75&amp;scrollbar=1&amp;toolbar=1&amp;navpanes=1" type="application/pdf"
style="width: 818px; height: 997px"></object>
Step 7
Save the page and the pdf
should now be viewable in
the iFrame
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio

11. - Display PDF’s in SharePoint
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.
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio

12. - Display PDF’s in SharePoint
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&amp;scrollbar=1&amp;toolbar=1&amp;navpanes=1"
type="application/pdf" style="width: 850px; height: 1000px<>/object>
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio

13. - Display PDF’s in SharePoint
This solution also works in Office 365!
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio

14. - Display PDF’s in SharePoint
The content editor web part(CEWP) with the script illustrated in these
slides can be downloaded from my on
Greg Gignac - SharePoint Consultant
My SharePoint Portfolio