Embed PDF in HTML: 6 methods (including enterprise solutions)

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.

Method 1 — Embed a PDF document in HTML with the embed tag

The <embed> tag(opens in a new tab) 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 PDF documents using the <embed> tag:

Method 2 — Use the object tag to embed a PDF document in HTML

The <object> tag(opens in a new tab) 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. [Download the PDF
    document](document.pdf)
  </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.

Method 3 — Display a PDF document in HTML with an iframe

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.

Method 4 — Fail‑safe embedding: object with iframe fallback

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. [Download the PDF](document.pdf)</p>
  </iframe>
</object>

Use case

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

Method 5 — Link out when you can't embed the PDF

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

<p>
  Open a PDF document:
  <a href="document.pdf" target="_blank" rel="noopener noreferrer">
    View PDF document
  </a>
</p>

Use case

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

Why basic HTML methods fall short in professional applications

While the HTML embedding methods above work for simple PDF display, they create significant challenges for professional websites and business applications:

Security vulnerabilities

• No access control — Basic HTML methods cannot prevent unauthorized PDF downloads or printing
• No user authentication — Anyone with the PDF URL can access the document directly
• Browser-dependent security — Security features like #toolbar=0 are easily bypassed and unreliable
• Direct file exposure — PDFs are accessible via direct URL manipulation, bypassing your website's security

Poor user experience on mobile

• Inconsistent rendering — HTML methods rely on browser PDF plugins that vary dramatically across devices
• No touch optimization — Lack of mobile-friendly navigation like pinch-to-zoom and swipe gestures
• Loading failures — Many mobile browsers fail to display embedded PDFs, showing blank spaces instead
• Accessibility issues — Screen readers and assistive technologies struggle with browser-rendered PDFs

Limited functionality and customization

• No annotation capabilities — Users cannot highlight, comment, or mark up documents
• Basic navigation only — Limited to simple page scrolling without advanced search or bookmarks
• Inconsistent UI — Cannot match your website's branding or design system

Performance and reliability problems

• Slow loading — Large PDFs cause browser freezing and poor page load performance
• Memory issues — Browser PDF rendering consumes excessive RAM, especially on mobile devices
• Cross-browser inconsistencies — Different rendering engines produce varying display quality and features
• No progressive loading — Entire PDF must download before display, unlike streaming solutions

Business and compliance limitations

• No digital signatures — Cannot support secure document signing workflows
• No form interaction — Interactive PDF forms don't work reliably across browser PDF viewers

Method 6 — Advanced web embedding with Nutrient Web SDK

While the previous HTML methods work for basic use cases, professional websites need enterprise-grade PDF embedding. Nutrient Web SDK provides advanced features, security, and customization that basic HTML cannot achieve.

Ready to see the difference? Try our interactive demo:

Upload a PDF and try drawing freehand, adding notes, or applying digital signatures to experience the advanced capabilities.

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. Our PDF form builder enables creation of these forms. This makes it ideal for applications requiring user input, such as surveys, contracts, or other interactive documents.

Comparison of PDF embedding methods

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

Getting started with Nutrient

Ready to upgrade your PDF embedding? Start a free trial and follow our getting started guide to implement enterprise-grade PDF viewing in minutes.

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.

FAQ