Five easy ways to embed and display a PDF in HTML (no JavaScript needed)

Embedding a PDF in HTML keeps viewers on your page, preserves document layout across devices, and boosts engagement — all without JavaScript or plug‑ins. This post will walk through five methods, complete with copy‑and‑paste code examples and optimization tips.

If you prefer video, watch the tutorial below.

Method 1 — Display a PDF in HTML with the object tag

The HTML <object> element taps the browser’s built‑in PDF reader and lets you add a plain text fallback:

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

Pros

• No JavaScript or external viewer required.
• Allows a graceful fallback message.

Cons

• Styling is locked to the browser’s PDF plugin.
• Some older browsers ignore PDF parameters like #page=2.

Method 2 — Use an iframe as a PDF viewer

Combine <object> with <iframe> to reach more browsers. The <iframe> acts as a backup when <object> fails:

<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.
      [Download the PDF](https://example.com/test.pdf)
      .
    </p>
  </iframe>
</object>

Pros

• Broad support across modern browsers and mobile devices.
• Works inside <object> fallback for extra reach.
• Easy to size and style the surrounding container with CSS.

Cons

• Browser UI varies and can’t be themed.
• Parameters like #page=2 or #toolbar=0 aren’t honored everywhere.
• No offline fallback message unless wrapped in <object>.

Method 3 — Embed a PDF with the embed tag

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"
/>

Pros

• Shortest markup of all native options.
• Supported by most evergreen browsers.

Cons

• No graceful fallback content; nothing renders if the browser lacks PDF support.
• Viewer UI is uncontrolled and inconsistent.
• Some mobile browsers download the PDF instead of displaying it.

Method 4 — Combine object + iframe for full fallback coverage

To ensure maximum compatibility, 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.
      [Download the PDF](https://example.com/test.pdf)
      .
    </p>
  </iframe>
</object>

Pros

• Highest compatibility without JavaScript.
• Provides a user‑friendly fallback message.

Cons

• More verbose HTML.
• Still inherits the limitations of each native viewer (no theming, limited API).
• Some browsers may request the PDF twice, increasing bandwidth.

Method 5 — Upgrade to a JavaScript PDF viewer for pro features

Need annotations, form filling, search, or redaction? Swap the native tags for a full‑featured library such as Nutrient Web SDK. These viewers give you:

• Consistent rendering across browsers.
• Custom UI themes.
• Extensive APIs (e.g. zoom, rotate, redact, sign).
• Accessibility hooks (ARIA roles, keyboard navigation).

Pros

• Feature‑rich toolkit and customizable UI.
• Predictable, consistent rendering on every device.
• Extensive APIs for integrations and automation.

Cons

• Adds kilobytes (or megabytes) to your JS bundle.
• Requires integration effort and potential licensing costs.

Problems with this approach

While native HTML tags are quick and code‑free, they come with notable downsides:

If you’re looking for a complete reference of parameters, check out the Parameters for Opening PDF Files(opens in a new tab) specification published by Adobe in 2007.

Best practices for embedding PDFs

When embedding PDF files in HTML, following best practices is crucial to ensure 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 the browser can render the file correctly.

• Use a consistent layout — Maintain a consistent layout for your PDFs to ensure they’re displayed correctly across different browsers and devices.

• Optimize for mobile — Ensure 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’re displayed correctly.

By following these best practices, you can ensure 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 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. Try out our PDF library using our free trial, and check out our demos to see what’s possible.

FAQ