Ultimate guide on how to embed PDF files using HTML

PDF files are widely used in industries like healthcare, education, and government. Displaying PDFs directly on your website ensures seamless document sharing without requiring users to download files first. However, embedding PDFs can be tricky due to the differences between HTML and PDF formats.

Embedding PDFs on websites is a practical way to deliver content without downloads. Common applications include:

• User manuals — Provide product guides directly on websites for easy access.

• Contracts — Display fillable legal documents for seamless online submission.

• Marketing materials — Showcase brochures or catalogs interactively.

• Educational resources — Share eBooks, research papers, or training materials.

• Reports — Present financial statements or annual reports professionally.

• Event flyers — Embed schedules or promotional materials for quick viewing.

With tools like Nutrient Web SDK, these PDFs become more interactive, secure, and user-friendly, making it easier to enhance the viewer experience.

Additionally, you can follow along with our step-by-step video tutorial for detailed guidance.

1 — Embedding using the embed tag

The <embed> tag is used to load external content, including PDFs, directly into a webpage. Here’s an example:

<embed
	src="document.pdf"
	type="application/pdf"
	width="100%"
	height="1000"
	title="Embedded PDF Viewer"
/>

Key attributes

• src — Specifies the PDF file’s location.

• type — Defines the file type (for PDFs, use application/pdf).

• width and height — Controls the viewer’s size within the parent container.

Use case

This method is simple to implement and works well in most modern browsers. Ensure the parent container has defined dimensions to avoid display issues.

Example for embedding a PDF file using the <embed> tag:

2 — Embedding using the object tag

The <object> tag provides a versatile way to embed PDFs while offering fallback content for unsupported browsers:

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

Key features

• data — Specifies the PDF file’s location.

• Fallback content — Displays alternative text or links when PDFs aren’t supported.

Use case

Ideal for environments requiring backward compatibility and fallback mechanisms.

3 — Embedding using the iframe tag

An <iframe> embeds web content, including PDFs, into a webpage. Example:

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

To disable the toolbar, append #toolbar=0 to the src attribute:

<iframe
	src="document.pdf#toolbar=0"
	width="100%"
	height="100%"
	style="border:none"
	title="Non-downloadable PDF Viewer"
></iframe>

Use case

Highly customizable for modern web applications. Offers flexibility in layout and URL parameter-based configurations.

4 — Combining object and iframe tags

Combining <object> and <iframe> tags leverages the strengths of both elements. Here’s an example:

<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="Fallback PDF Viewer"
	>
		<p>
			Your browser does not support PDFs.
			<a href="document.pdf">Download the PDF</a>
		</p>
	</iframe>
</object>

Use case

Best for ensuring maximum compatibility. Combines the fallback capabilities of <object> with the customization options of <iframe>.

5 — Linking with the a tag

The simplest approach is linking to the PDF directly using an <a> tag:

<p>
	Open a PDF file
	<a href="document.pdf">example</a>
</p>

Use case

Useful when embedding isn’t necessary, and direct access to the PDF file suffices. Best for scenarios prioritizing simplicity.

Comparison of PDF embedding methods

This table summarizes the pros and cons of each embedding method:

Problems with these PDF embed methods

When embedding PDF files in HTML documents using tags like <embed> and <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.

Enhancing embedded PDFs with JavaScript

While embedding PDFs using basic HTML tags like <embed>, <object>, and <iframe> is an easy and fast method for displaying PDF files on a website, Nutrient Web SDK offers several advantages for users looking for more advanced features, enhanced control, and a better user experience.

Below is a breakdown of why you might choose Nutrient over native HTML methods.

1. Enhanced PDF viewer features

• Advanced navigation — Nutrient offers interactive navigation options such as custom page modes (single page, continuous scrolling) and page zoom features. These are far superior to the basic zoom and page navigation offered by native embedding methods.

• Annotations and markups — Nutrient’s SDK enables users to add annotations, highlights, text, and other markup to PDF documents, a feature not available in basic HTML embedding.

• Advanced text search — Nutrient provides robust search capabilities, making it easy to search for text within a PDF document, which is a limitation in basic HTML tags.

2. Customization

• UI customization — With Nutrient’s SDK, developers can customize the viewer’s UI to match their website design, offering a more seamless integration. Basic HTML embedding methods, on the other hand, provide limited customization of the viewer.

• Responsive design — Nutrient’s viewer automatically adjusts to various screen sizes, offering a more mobile-friendly experience compared to basic embedding tags.

3. Security

• Secure PDF viewing — Nutrient’s SDK allows developers to implement secure viewing features like encryption, password protection, and restricted access to certain PDF features. This is crucial for organizations handling sensitive or confidential information. In contrast, native HTML methods offer no security features.

• No file download option — With Nutrient, developers can disable PDF downloads entirely, preventing unauthorized distribution of a document, while basic HTML tags allow users to easily download embedded PDFs.

4. Performance optimization

• Faster load time — Nutrient is optimized for fast loading and smooth performance, particularly when dealing with large PDF files. Basic HTML embedding methods can sometimes suffer from slow load times, especially with heavy or complex documents.

5. Cross-browser compatibility

• Native browser integration — Nutrient ensures full compatibility across modern browsers, handling any quirks or inconsistencies with PDF rendering that can arise from browser-based PDF viewers. Native methods often rely on browser plugins or built-in viewers that might not work as reliably across all browsers.

6. Interactive elements

• Form filling and data extraction — Nutrient allows for form filling and data extraction from interactive PDFs, a feature unavailable with basic HTML tags. This makes it ideal for applications requiring user input, such as surveys, contracts, or other interactive documents.

Example of our JavaScript PDF viewer

To demo our JavaScript PDF viewer, upload a PDF, JPG, PNG, or TIFF file by clicking Open Document under the Standalone option (if you don’t see this option, select Choose Example from the dropdown). Once your document is displayed in the viewer, try drawing freehand, adding a note, or applying a crop or an eSignature.

Follow the getting started guide to embed Nutrient for PDF viewing and editing in your project.

Comparison table: Nutrient SDK vs. basic HTML embedding methods

FAQ

Here are a few frequently asked questions 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.