How to Embed a PDF Viewer in WordPress

You have uploaded a PDF file to your WordPress website. You want to embed it into your posts so the visitors can preview without downloading it. How to do that? In this article, we'll show you how to embed a PDF viewer in WordPress without using a plugin. It's very simple as you'll see.

The guide below works not only for PDF file, but also for Office files as well (Word, Excel, PowerPoint).

Using Google Docs Viewer

Google Docs is not only an online application that helps you create any document only, but also a powerful app that can do many other things. One of the features that Google Docs offer for free is the online viewer. This viewer allows us to preview any PDF file online without downloading it.

There are 2 ways to let your visitors preview a file in WordPress: embedding PDF or providing a preview link to that file. Let’s see how to do each of them:

Embed a PDF viewer in your WordPress posts

Before embedding a PDF viewer in your posts, you need to upload a PDF to the Media Library. Just click on Add Media button when editing a post and upload that file. Then copy the link to the PDF file as below:

After that, switch the editor to the text mode by clicking on the Text tab next to the Visual tab on the top right of the editor. Then insert the follow code:

<iframe src="https://docs.google.com/viewer?embedded=true&url=FILE_URL" style="width: 100%; height: 400px; border: none;"></iframe>

You can change the width and height in the code to fit your content area.

For example, this is the code for a PDF file:

<iframe src="https://docs.google.com/viewer?embedded=true&url=https://gretathemes.com/wp-content/uploads/2017/11/Resume.pdf" style="width: 100%; height: 400px; border: none;"></iframe>

And this is the result:

Link to preview PDF file online

If you don’t want to embed a PDF viewer in your posts, you can provide a preview link. When users click on that link, they will see the content of the file (PDF or Office file) without downloading it.

To create a preview link, just use this format:

https://docs.google.com/viewer?embedded=true&url=FILE_URL

With the same file above, the link will be:

https://docs.google.com/viewer?embedded=true&url=https://gretathemes.com/wp-content/uploads/2017/11/Resume.pdf

And you can preview the file by clicking here.

Using Microsoft Office Viewer

Like Google, Microsoft has its own online office suite. Because Microsoft is the first creator of the office suite, its online app might be better than Google Docs or other’s in term of compatibility and features for Word, Excel, PowerPoint file.

One big disadvantage of Microsoft Office Viewer is it works only for Office files, not PDF. So the guide below applies only to Office files.

The Microsoft Office Viewer is very much the same as Google Docs Viewer. Only the URL of the viewer is different. Let's see how to use it:

Embed the Office viewer in your WordPress posts

Just use the following code to embed a viewer into your posts. Remember to switch the editor to Text mode before inserting:

<iframe src="https://view.officeapps.live.com/op/view.aspx?src=FILE_URL" style="width: 100%; height: 400px; border: none;"></iframe>

You can change the width and height in the code to fit your content area.

For a sample docx, the viewer looks like this:

<iframe src="https://view.officeapps.live.com/op/view.aspx?src=https://gretathemes.com/wp-content/uploads/2017/12/Meeting-notes.docx" style="width: 100%; height: 400px; border: none;"></iframe>

And this is the result:

Link to preview Office file online

Like Google Docs Viewer, to create a preview link, just use this format:

https://view.officeapps.live.com/op/view.aspx?src=FILE_URL

With the same file above, the link will be:

https://view.officeapps.live.com/op/view.aspx?src=https://gretathemes.com/wp-content/uploads/2017/12/Meeting-notes.docx

And you can preview the file by clicking here.

Compare Google Docs Viewer and Microsoft Office Viewer

While both viewers work well in most case, there are some situations that one viewer is better than the other.

• The most important thing to remember is the Microsoft Office Viewer does not support PDF file format. It only works with office files: Word, Excel, PowerPoint
• Speed: in our tests, Google Docs Viewer seems to have a better speed of loading than Microsoft Office Viewer
• Compatibility: Microsoft Office Viewer seems to have better compatibility, especially with large Excel files.

If your files are not complicated (like having many formulas), then we recommend using Google Docs Viewer. It works perfectly at 99%. But if you see any issue with the data displayed, try Microsoft Office Viewer as a backup.

To get the best viewing results, you can use a PDF Editor to be able to generate and design your PDF from scratch before embedding the file.