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.

When to use

• When you need a fallback message and want a clean, no-JavaScript solution.
• For embedding PDFs in pages where you want a basic but reliable native viewer.
• When full compatibility with modern browsers is enough, and a custom UI isn’t needed.

Method 2 — Use an iframe as a PDF viewer

The <iframe> tag is a simple way to embed a PDF directly in a webpage. It relies on the browser’s built-in PDF viewer.

<iframe
  src="https://example.com/test.pdf"
  width="100%"
  height="600px"
  style="border: none;"
></iframe>

Pros

• Simple and fast to use — Just one line of HTML is needed.
• Widely supported — Works in Chrome, Firefox, Safari, Edge, and most mobile browsers.
• No extra dependencies — No need for plugins or JavaScript libraries.

Cons

• No UI control — You can’t customize the PDF toolbar or features.
• No error fallback — If the PDF fails to load, the frame breaks.
• CORS issues — External PDFs may be blocked without proper headers.
• Not fully accessible — May not work well with screen readers.

When to use

• For basic PDF viewing without interactivity.
• In modern browser environments where PDF support is reliable.
• When speed and simplicity are more important than customization.

If you need better fallback or more control, consider combining <object> with <iframe> (Method 4).

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.

When to use

• For quick PDF embedding in environments where browser support is known (e.g. internal tools).
• When minimal code is preferred and fallback isn’t a concern.
• For desktop-first applications where mobile rendering isn’t a priority.

Method 4 — Combine object + iframe for full fallback coverage

To maximize browser compatibility, wrap an <iframe> inside an <object> element. If the browser fails to render the PDF using <object>, it’ll attempt to display it using the <iframe> instead. This ensures graceful fallback without JavaScript:

<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 PDF viewing.
      <a href="https://example.com/test.pdf">Download the PDF</a>.
    </p>
  </iframe>
</object>

Pros

• Maximum compatibility — Covers more browsers than using <iframe> or <object> alone.
• No JavaScript required — Works with pure HTML.
• Graceful fallback — Displays a message or link if both viewers fail.

Cons

• Heavier markup — Slightly more complex HTML structure.
• Limited customization — Still relies on browser-native PDF renderers.
• Possible double requests — Some browsers may fetch the PDF twice (once for each tag).

Best for

Environments where you can’t control the user’s browser and want the best chance of rendering a PDF cleanly with a basic HTML-only solution.

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, which gives 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.

When to use

• When you need interactive features like annotations, redaction, or form support.
• For building enterprise apps, document portals, or complex workflows.
• When consistent rendering and control matter more than simplicity.

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