Five Easy Ways to Display a PDF in HTML

This article was first published in February 2018 and was updated in November 2024.

PDF documents, or Portable Document Format files, are widely used across the internet, whether it’s an invoice from an online shop or a sales agreement. PDFs maintain consistent formatting across devices, making them ideal for web use. However, displaying a PDF in an HTML page can be challenging without the right approach.

This post will cover five easy ways to display a PDF in HTML, using simple HTML elements like <embed>, <object>, and <iframe>. These methods work across different programming languages and don’t require JavaScript.

If you prefer a video tutorial, check out our YouTube video below on how to display a PDF viewer in HTML.

Introduction to Embedding PDF Files in HTML

Embedding PDF files in HTML is a fantastic way to make your website more interactive and engaging for visitors. PDF files are widely used for sharing documents, reports, and other types of content, and embedding them directly into your HTML document allows users to view the content without leaving the web page. This not only enhances user experience but also keeps your audience engaged on your site.

In this article, we will explore various methods for embedding PDF files in HTML, including using the object tag, iframe tag, and embed tag. Each method has its own set of advantages and disadvantages, which we will discuss in detail. Additionally, we will provide best practices for embedding PDFs to ensure they are displayed correctly and provide a seamless user experience.

1 — Display a PDF in HTML Using the Object Element

Given the immense popularity of PDF, it’s no wonder that all common browsers (Google Chrome, Firefox, Internet Explorer, Edge, and Safari) include some sort of built-in PDF support. This makes it possible to embed PDFs into HTML pages without using JavaScript.

The HTML <object> element can use a native browser for PDF viewing, and it even allows you to provide a fallback if PDF isn’t supported. It doesn’t require JavaScript and is a common tool when working on an HTML5 application:

<object
	data="https://example.com/test.pdf#page=2"
	type="application/pdf"
	width="100%"
	height="100%"
>
	<p>
		Your browser does not support PDFs.
		<a href="https://example.com/test.pdf">Download the PDF</a>
		.
	</p>
</object>

2 — Display a PDF in HTML Using the Iframe Element

Since <object> isn’t available in every browser, this method is often combined with the <iframe> HTML element to reach the most users. 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 our 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="https://example.com/test.pdf#page=2"
	type="application/pdf"
	width="100%"
	height="100%"
>
	<iframe
		src="https://example.com/test.pdf#page=2"
		width="100%"
		height="100%"
		style="border: none;"
	>
		<p>
			Your browser does not support PDFs.
			<a href="https://example.com/test.pdf">Download the PDF</a>
			.
		</p>
	</iframe>
</object>

3 — Display a PDF in HTML Using the Embed Element

The <embed> element is another effective way to display a PDF in HTML. It’s easy to implement and is widely supported:

<embed
	src="https://example.com/test.pdf"
	type="application/pdf"
	width="100%"
	height="500px"
/>

4 — Combining Object and Iframe for Maximum Compatibility

To ensure maximum compatibility, you can combine the <object> and <iframe> methods. This provides a fallback option for browsers that don’t support one of the elements:

<object
	data="https://example.com/test.pdf#page=2"
	type="application/pdf"
	width="100%"
	height="100%"
>
	<iframe
		src="https://example.com/test.pdf#page=2"
		width="100%"
		height="100%"
		style="border: none;"
	>
		<p>
			Your browser does not support PDFs.
			<a href="https://example.com/test.pdf">Download the PDF</a>
			.
		</p>
	</iframe>
</object>

5 — Use a Dedicated PDF Viewer Library for Advanced PDF Viewer Features

For more advanced features, like annotations, interactive forms, or digital signatures, consider using a dedicated PDF viewer library. PSPDFKit offers a feature-rich and customizable HTML5 PDF viewer library that integrates easily into your web app.

Live Example

Check out this live example of a PDF embedded using the above methods:

This example demonstrates how easy it is to display a PDF in your web app without relying on JavaScript.

Problems with this Approach

This approach of displaying PDF documents is fast and requires no programming. There are, however, certain downsides:

• Lack of customization — 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 UI used when loading a PDF via an <object> is completely outside of your control.

• Browser support — It isn’t guaranteed that every browser will implement a PDF view via <object> or <iframe>. For example, certain versions of Internet Explorer will require your users to install Adobe Reader to support rendering a PDF via <object>, whereas other browsers might not support it at all.

• Limited API options — There’s only a very limited set of API methods. In fact, if you look closely at the data and src properties in the above examples, you can see we’ve appended #page=2 to the URLs. This allows you to control the page that’s shown. If you’re looking for a complete reference of parameters, check out the Parameters for Opening PDF Files specification published by Adobe in 2007. Unfortunately, supporting those parameters isn’t required, and thus, there’s no guarantee that this flag really works (as an example, while writing this, we noticed Safari 11 doesn’t seem to honor any of the mentioned properties).

Best Practices for Embedding PDFs

When embedding PDF files in HTML, following best practices is crucial to ensure that your PDFs are displayed correctly and provide a good user experience. Here are some tips to keep in mind:

• Use the Correct MIME Type: Always specify the correct MIME type (application/pdf) when embedding a PDF file. This ensures that the browser can render the file correctly.

• Use a Consistent Layout: Maintain a consistent layout for your PDFs to ensure they are displayed correctly across different browsers and devices.

• Optimize for Mobile: Ensure that your PDFs are optimized for mobile devices by using a responsive design and keeping the file size manageable.

• Provide Alternative Text: Include alternative text for your PDFs to make the content accessible to users with disabilities.

• Test for Compatibility: Test your PDFs for compatibility with different browsers and devices to ensure they are displayed correctly.

By following these best practices, you can ensure that your embedded PDF files provide a smooth and accessible experience for all users.

Conclusion

With the <object> or <iframe> 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. Try out our PDF library using our free trial, and check out our demos to see what’s possible.

FAQ

Here are a few frequently asked questions about displaying PDFs in HTML.

How can I display a PDF in my web app?

You can display a PDF in your web app using an <iframe>, <object>, or <embed> element. These methods are simple to implement and work across most browsers.

How do I embed a PDF using an iframe?

To embed a PDF using an iframe, use the following HTML code: <iframe src="path/to/your.pdf" width="600" height="500"></iframe>. This will display the PDF document within the specified dimensions.

Can I customize the PDF viewer when embedding using an iframe?

Customization options are limited when using an iframe, but you can add URL parameters like #toolbar=0 to hide the toolbar or adjust the dimensions of the iframe to fit your needs.

What are some best practices for opening PDFs in a web app?

Best practices include using libraries like PDF.js for better customization and functionality, ensuring cross-browser compatibility, and optimizing performance for smooth loading and navigation of PDF documents.