5 easy ways to embed a PDF viewer in HTML

This article was first published in October 2021 and was updated in November 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 to application/pdf.

• The width and height attributes specify the width and height of the PDF file viewer (the embed 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 <object> tag is one of the primary ways to embed PDF files into HTML. This method allows you to embed various types of content, including PDFs, multimedia elements, and interactive documents.

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 and height 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>

The <iframe> method is highly recommended for embedding PDFs due to its flexibility and ease of customization. You can adjust attributes such as width, height, and style, and use URL parameters like #toolbar=0 to control viewer options.

4 — Combining 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.

Open a PDF file example.

Comparison of PDF embedding methods

This section outlines the pros and cons of different PDF embedding methods. Understanding these can help you decide which method aligns best with your requirements.

Detailed comparison of embedding methods

For a more in-depth analysis, this section compares each method based on various criteria such as browser support, customization options, advanced features, and user experience.

Problems with these PDF embed methods

When embedding PDF files in HTML documents using tags like <embed>, <object>, or iframes, there are several limitations and drawbacks to consider.

1. Limited API and customization options

Traditional embedding methods provide only a minimal set of API methods, and many attributes are now deprecated. Additionally, you have no control over the PDF viewer’s user interface (UI). The browser decides which PDF reader to use, making it difficult to customize the look and feel.

2. Dependence on browser plugins

Many modern browsers no longer support plugins like Adobe Flash, making it unreliable to embed PDFs using <embed> or <object> tags. Browser vendors may continue to reduce support for these tags, posing potential compatibility issues in the future.

3. Security issues with iframes

Embedding PDFs in iframes comes with security risks, such as clickjacking attacks, where users are tricked into interacting with a hidden iframe instead of a visible UI element. Implementing security measures (e.g. X-Frame-Options headers) can help mitigate some of these risks.

Additional limitations and considerations

Embedding PDFs in HTML involves several other limitations:

• Browser compatibility — Not all browsers support PDF embedding in the same way, leading to inconsistent user experiences across devices.

• Performance — Large and complex PDFs can slow down page load times, impacting user experience. Optimizing PDFs for web use can help mitigate these issues.

• Security risks — Embedded PDFs could contain malicious code or viruses, so it’s essential to source files from trusted locations and use security precautions.

• Accessibility — PDFs embedded through traditional methods may not be accessible to users with disabilities, which limits usability for a broader audience. Enhancing accessibility through HTML, CSS, and JavaScript is important.

Suggested improvements for embedding PDFs

To provide a better user experience, consider the following alternatives to traditional embedding methods.

1. Using libraries

Tools like PDF.js and Nutrient provide more control over rendering and interactivity, helping to address limitations in customization, security, and compatibility with older methods.

2. Testing across devices

Ensuring compatibility by testing embedded PDFs on various browsers and devices helps maintain a consistent experience for users.

3. Optimizing PDF files

Reducing the size and complexity of PDFs before embedding can improve load times and overall performance.

4. Implementing security measures

Apply security headers, source PDFs from trusted locations, and follow best practices to protect users from potential threats.

5. Enhancing accessibility

Use HTML, CSS, and JavaScript to create a seamless, accessible user experience, ensuring a PDF viewer is usable for all users, including those with disabilities.

By following these best practices and considering these factors, you can create a secure, user-friendly, and efficient experience when embedding PDF files on your webpages.

FAQ

Here are a few frequently asked questions about about how to embed PDF in HTML.

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 Nutrient, 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.