1

I am trying to embed a PDF viewer into our company's internal shared site where internal users can easily view my team's software documentation. The company is fairly large, so we are trying to make it look very professional for when other teams visit my team's page for software documentation. I saw on a completely unrelated website their document viewer and I want to display our documents in a similar type of way.

Below is a screen shot of the document viewer that I want it to look like (identifying information blocked out). The document viewer option that comes standard with the SharePoint does not have the side panel that offers a glance to the other pages like this one does. I see similar document viewers on other websites as well, so I know it can be done!

This is my previous post about embedding a PPT but never thought to add it in as a PDF, and it is already looking better. How to Embed/ Display a PPT on SharePoint Intranet Site

This is the end goal:

End Goal

This is how it currently is:

Current

My questions are: Is it possible to embed a similar style of view into my own SharePoint?

Improve this question

1 Answer 1

Reset to default
0

It is possible with the same workaround of using Embed web part as I mentioned at: How to Embed/ Display a PPT on SharePoint Intranet Site

You can use the iframe code like below to embed the PPT in view mode on your page.

<iframe src="https://tenant.sharepoint.com/Books/Random/Communication_ebook_ESPC_SBeerendonk.pdf" title="PPT" width="100%" height="600"></iframe>

Output:

enter image description here

Users can expand/collapse the side panel using the Menu option --> Highlighted in above image.

You can get the PDF URL to put in src attribute of above code by following below steps:

  1. Go to SharePoint document library where you have uploaded the PDF

  2. Select the PDF file & click Open from command bar & then select Open in browser

    enter image description here

  3. It will open a new browser tab. Copy the URL from new browser up to ? like:

    enter image description here

  4. Use this URL in above embed/iframe code.

Additional: Use focus mode in modern SharePoint pages for better view experience for embedded files on pages.

Improve this answer
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.