How to Embed a PDF Viewer in Your Website
![Illustration: How to Embed a PDF Viewer in Your Website](/assets/images/blog/2021/how-to-embed-a-pdf-viewer-in-your-website/article-header-6e02070a.png)
![]()
This article was first published in October 2021 and was updated in June 2024.
The PDF file format, created by Adobe, is widely used in various industries such as healthcare, education, and government. It’s common to find PDF files embedded in or attached to websites. However, embedding a PDF viewer in a website can be challenging, as HTML and PDF formats are very different.
If you’re looking for a fast and simple way to embed PDF documents in your website, this post will provide you with five methods to do so. These methods utilize HTML tags and can be implemented on any website. The default PDF viewer includes features like pagination, zoom, scroll, and download functionality.
You can watch our step-by-step video tutorial guide.
1 — Embedding Using the Embed Tag
The <embed>
element is used to load external content to a website. The content is provided by an external application, multimedia, or interactive content such as a browser plugin.
To use this element, you need to add the following attributes to the <embed>
tag. Notice the URL to the PDF file in the src
attribute:
<embed src="document.pdf" type="application/pdf" width="100%" height="100%" title="Embedded PDF Viewer" />
-
The
src
attribute specifies the location of the PDF file. In the case above, the document is located in the same directory as the HTML file. -
The
type
attribute specifies the type of the embedded file. For PDF documents, the value of this attribute should be set toapplication/pdf
. -
The
width
andheight
attributes specify the width and height of the PDF file viewer (theembed
element). Here, they’re set to take the whole width and height of the parent container, so you have to make sure the parent container has an actual width and height, otherwise the content won’t be visible.
Support for the <embed>
element is currently available in all major browsers.
2 — Embedding Using the Object Tag
The HTML <object>
element can be used in a native browser for PDF viewing, and it even allows you to provide a fallback if the PDF format isn’t supported:
<object data="document.pdf" type="application/pdf" width="100%" height="100%" aria-labelledby="PDF document" title="Embedded PDF Viewer" > <p> Your browser does not support PDFs. <a href="document.pdf">Download the PDF</a> </p> </object>
-
The
data
attribute specifies the URL location of the PDF file.
Similar to the <embed>
element, you can add the type
, width
, height
, and title
attributes to the <object>
tag.
In the example above, if the browser doesn’t support displaying PDFs, the <object>
tag will display a message with a link to download the PDF.
3 — Embedding Using the Inline Frame Tag
An <iframe>
, short for “inline frame,” is a container for embedding information from other web pages, either as a full page or as a widget. It has some attributes that allow you to control the appearance of the content:
-
src
specifies the URL location of the data source. -
width
andheight
control the frame’s width and height. -
title
provides an accessible title for the frame. -
Under
style
,border:none
removes the border around the frame.
This is the code for the <iframe>
element:
<iframe src="document.pdf" width="100%" height="100%" style="border:none" title="Embedded PDF Viewer" ></iframe>
Here, the document.pdf
file is in the same directory as the HTML file.
It’s also possible to prevent the PDF document from being downloaded by the user by adding #toolbar=0
after the URL of your PDF document:
<iframe src="document.pdf#toolbar=0" width="100%" height="100%" style="border:none" title="Embedded PDF Viewer, non-downloadable PDF" ></iframe>
4 — Embedding Using the Object and Inline Frame Tags
This method combines <object>
with the <iframe>
HTML element. To do this, the fallback area of the <object>
is used to host an <iframe>
. Similar to the <object>
element, the content of an <iframe>
— the <p>
tag with its content in this case — is only shown when the browser doesn’t support PDFs via the <iframe>
element:
<object data="document.pdf" type="application/pdf" width="100%" height="100%" title="Embedded PDF Viewer" > <iframe src="document.pdf" width="100%" height="100%" style="border: none" title="Embedded PDF Viewer, iframe fallback" > <p> Your browser does not support PDFs. <a href="document.pdf">Download the PDF</a> </p> </iframe> </object>
5 — Embedding Using the Anchor Tag
A hyperlink or anchor element is a piece of text that can be clicked, and when the user clicks it, they’ll be taken to another location on the same page or to a completely different website. In this section, you’ll use the <a>
tag to link to the PDF file.
It has a simple format; just add the href
attribute to the <a>
tag:
<p>
Open a PDF file
<a href="document.pdf">example</a>
</p>
The href
stands for hypertext reference and is used to designate the website or file that the link points to. Substitute document.pdf
with the name of your PDF file. If you click the example
link, the browser will open the PDF file.
Try the example below:
Open a PDF file example.
Browser Support
Edge | Firefox | Safari | Chrome | |
---|---|---|---|---|
embed | ||||
iframe | ||||
object |
As you can see, currently the <embed>
, <iframe>
, and <object>
tags are supported by all major browsers. You can check out the website Can I Use for more information.
Problems with These PDF Embed Methods
All that said, there are some shortcomings of the methods outlined above, such as:
-
There’s only a very limited set of API methods, and some of the attributes are deprecated.
-
A browser could use whichever PDF reader is installed on a system, and there’s no API that would allow you to customize the reader’s look and feel. In other words, the user interface (UI) used when loading a PDF via the aforementioned tags is beyond your control.
-
Keep in mind that most browsers no longer support browser plugins such as Adobe Flash. So, relying on
<embed>
or<object>
tags may no longer be a good idea, as browser vendors may deprecate or limit support for them in the future. -
There are some security issues with iframes. For example, clickjacking is a common iframe attack that fools users into thinking they’re clicking a visible UI element when they’re actually clicking a hidden iframe. You can learn about the mitigation of this attack by reading this article.
FAQ
This section answers some of the commonly asked questions about how to embed PDF in HTML.
How to Embed a PDF Viewer in HTML?
To incorporate a PDF viewer in HTML, use the <embed>
, <object>
, <iframe>
, and <a>
HTML5 elements. These elements enable you to display a PDF in your web application effortlessly. This functionality is supported in the majority of browsers and doesn’t require JavaScript, making it an ideal solution for adding PDF support when advanced features aren’t needed. For advanced features, consider using a commercial PDF viewer library.
How to Embed a PDF Viewer into Your Website without the Ability to Download?
To embed a PDF viewer into your website without the ability to download, you can use the <iframe>
element and add #toolbar=0
after the URL of your PDF document. This will make the PDF document undownloadable.
Conclusion
This post taught you how to embed a PDF viewer into your website. With <embed>
, <object>
, <iframe>
, and <a>
HTML5 elements, it’s possible to show a PDF in your web app with ease. This is supported in most browsers and requires no JavaScript at all, making it a perfect approach for adding PDF support if no advanced features are necessary.
However, for use cases that require support for every browser, customization, or more advanced PDF features — such as PDF annotations, interactive PDF forms, and digital signatures — we recommend you look into commercial alternatives.
At PSPDFKit, we offer a commercial, feature-rich, and completely customizable HTML5 PDF viewer library that’s easy to integrate and comes with well-documented APIs to handle complex use cases. Check out our PDF library using our free trial, and play around with our demo to see what’s possible.