How to Embed a PDF Viewer in Your Website

PDF is a file format created by Adobe, and it’s used in a wide variety of industries, including healthcare, education, and government. So, it’s not uncommon to see PDF files on websites. If you’re looking for ways to embed or attach PDF documents to your website in a fast and simple way, this post will help you.

More specifically, you’ll look at five ways of embedding a PDF file in your website. You’ll use HTML tags to embed the PDFs, so these methods should work on any website. The default PDF viewer comes with pagination, zoom, scroll, and download functionality.

If you prefer a video tutorial, you can watch our step-by-step guide:

1 — 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:

<embed
	src="document.pdf"
	type="application/pdf"
	width="100%"
	height="100%"
/>

• The src attribute specifies the location of the PDF file. The document is located in the same directory as the HTML file.

• The type attribute specifies the type of the embedded file. The value of this attribute is application/pdf.

• The width and height attributes specify the width and height of the PDF file.

Support for the <embed> element is currently available in all major browsers. However, it wasn’t part of the HTML specification until HTML5.

2 — 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 PDF isn’t supported. It was designed to embed plugins in webpages:

<object
	data="document.pdf"
	type="application/pdf"
	width="100%"
	height="100%"
	aria-labelledby="PDF document"
>
	<p>
		Your browser does not support PDFs.
		<a href="document.pdf">Download the PDF</a>
	</p>
</object>

• The data attribute specifies the location of the PDF file.

Similar to the <embed> element, you can add the type, width, and height attributes to the <object> tag.

If the browser doesn’t support PDFs, the <object> tag will display a message with a link to download the PDF.

3 — Using the Inline Frame Tag

An <iframe>, short for inline frame, is a container for embedding information from other webpages, either as a full page or a widget. It has some attributes that allow you to control the appearance of the content:

• src specifies the location of the data source. You can add a URL or a local file.

• width and height control the frame’s width and height.

• Under style, border:none removes the border around the frame. frameborder is used to remove the border around the frame; however, it’s currently deprecated.

This is the code for the <iframe> element:

<iframe
	src="document.pdf"
	width="100%"
	height="100%"
	style="border:none"
></iframe>

Here, the document.pdf file is in the same directory as the HTML file.

It’s also possible to make the PDF document undownloadable by adding #toolbar=0 after the URL of your PDF document:

<iframe
	src="document.pdf#toolbar=0"
	width="100%"
	height="100%"
	style="border:none"
></iframe>

4 — 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> — in your case, this would be the <p> tag with its content — 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%"
>
	<iframe
		src="document.pdf"
		width="100%"
		height="100%"
		style="border: none"
	>
		<p>
			Your browser does not support PDFs.
			<a href="document.pdf">Download the PDF</a>
		</p>
	</iframe>
</object>

5 — Using the Anchor Tag

A hyperlink or anchor element is a bit of text that, when clicked, takes a user 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 on the example link, the browser will open the PDF file.

Try the example below:

Open a PDF file example.

Browser Support

	IE11	Edge 99	Firefox 98	Safari	Chrome	Opera
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 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 outside of 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.

• There are some security issues with iframes. For example, clickjacking is a common iframe attack that fools users into thinking they’re clicking on the visible UI element when they’re actually clicking on a hidden iframe. You can learn about the mitigation of this attack by reading this article.

Conclusion

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 some of the more advanced PDF features — such as PDF annotations, interactive PDF forms, digital signatures, and more — 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.