How to embed a PDF in a modern SharePoint page

Posted by Beau Cameron on 09.15.17
Beau Cameron
Find me on:

clapping-employees-logo

"This website doesn't support embedding using just the address. Try pasting the embed code instead. If it's important to embed from this site using just the address, please send us feedback."

If you've just started using modern SharePoint you may find you want to embed PDFs on a page. Document embedding is quite easy, all you have to do is use the Document webpart and add a link to your file. However, you'll quickly find that does not support PDFs. However, if you try to add it using the Embed webpart, you may have come across this error above. In this post, I am going to show you how to overcome this issue and successfully add a PDF to a modern SharePoint page.


 

Let's say we upload a PDF file to a document library on my new modern Office365 site.

PDFInLibrary.png

 

 IS YOUR SHAREPOINT UNDERPERFORMING? GET STRATEGIES FOR IMPROVEMENT.

This is just a regular old PDF file that I would like to now surface onto a SharePoint page. The first thing you may do is grab the Document webpart. However, you'll quickly find that you cannot use this webpart for PDFs! (bug?)

ThisFolderIsEmpty.png

The document webpart asks you select the file you wish to render, but your PDFs do not show up here. So what do we do? Well, this is where the embed webpart comes in. 

I'm not going to dive into the "how-tos" with the embed webpart. If you would like a bit more information on how to use this webpart, please checkout this post. This post outlines how to embed a YouTube video onto your SharePoint page.

The first thing you may try to do is grab the URL to the PDF document and use it in the embed webpart. A typical URL would look like this.

PDFURL.png

I will select this entire URL and paste it into my embed webpart property.

Uh oh! That doesn't work!?

EmbedError.png

Immediately you'll start scratching your head wondering why this isn't working. You may even type out the embed code and reference the URL to your PDF as well. But that still will not work. So what's the problem? The issue is that we are using the embed webpart improperly. In this scenario we are expecting it to act like a document webpart, however, the embed webpart is only used to embed webpages onto your SharePoint page. So what we need to do is get a url to page instead of a direct link to the PDF file. 

To do this, go back to the library that is holding your PDF file, instead of selecting "Open in browser", just open the default view for a file in the new modern libraries. You'll notice it loads a url "AllItems.aspx" with a parameter url to the pdf file.

URL.png

 

This page is the new modern display for documents within a document library in SharePoint. What you want to do is use this URL and paste it inside of your embed webpart properties. Voila! Error is gone!

EmbedPDF.png

 

Success! The new modern display AllItems.aspx page gives us the flexibility to embed PDFs onto our Modern SharePoint page!

New call-to-action

Considering the benefits of a new, Accelerated Intranet package? Find out more....

Topics: Development

Subscribe Here!

Recent Posts

Posts by Tag

See all