How to View a PDF in HTML

PDF documents are used all across the internet. Be it an invoice from an online shop, or a sales agreement, PDF is everywhere. One of the main arguments for using PDF as opposed to word processor files is the fact that the PDF file format is rendered exactly the same no matter the device. This trait is especially useful on the web, where getting something to look the same on different browsers isn’t always easy.

In this article, we’ll look at a simple approach for showing PDFs in an HTML app without using JavaScript by making use of the <object> and <iframe> HTML5 elements. This option works regardless of the programming language you’re using — no matter if you’re an ASP.NET, JavaScript, PHP, C++, Java, Python, or Ruby specialist.

Embedding a PDF in HTML with an 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. Let’s explore the most common method to do so.

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>

Embedding a PDF in HTML with an 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>

Live Example

If you’re curious how the above PDF will be rendered in your browser, check out the following example integration:

These simple HTML elements work in most desktop browsers and can be used to add PDF support to 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:

• 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.

• 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.

• 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).

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.