---
title: "How to display a PDF in HTML: Six easy ways (with code)"
canonical_url: "https://www.nutrient.io/blog/open-pdf-in-your-web-app/"
md_url: "https://www.nutrient.io/blog/open-pdf-in-your-web-app.md"
last_updated: "2026-06-16T17:05:45.671Z"
description: "Learn how to display and embed a PDF in HTML — with the object, iframe, and embed tags, the Google Docs viewer, and JavaScript PDF viewers. Six methods with copy-paste code and tradeoffs."
---

**TL;DR**

Six ways to embed a PDF in HTML, from simplest to most powerful:

- **[`<object>` tag](#method-1--display-a-pdf-in-html-with-the-object-tag)** — Native HTML with a text fallback. No JavaScript needed.

- **[`<iframe>` tag](#method-2--use-an-iframe-as-a-pdf-viewer)** — One line of HTML, widely supported.

- **[`<embed>` tag](#method-3--embed-a-pdf-with-the-embed-tag)** — Shortest markup, no fallback.

- **[`<object>` + `<iframe>` fallback](#method-4--combine-object--iframe-for-full-fallback-coverage)** — Maximum compatibility without JavaScript.

- **[Google Docs viewer](#method-5--use-google-docs-viewer)** — Works on devices without a native PDF viewer; not for private documents.

- **[JavaScript PDF viewer](#method-6--upgrade-to-a-javascript-pdf-viewer-for-pro-features)** — Annotations, forms, digital signatures, and consistent rendering. We recommend [Nutrient Web SDK](https://www.nutrient.io/guides/web.md).

Embedding a PDF in HTML keeps viewers on your page and preserves document layout across devices. This post walks through six methods — five that work without JavaScript, plus a JavaScript-based option for when you need annotations, forms, or signatures — with copy‑and‑paste code examples and tradeoffs for each.

## How do you display a PDF in HTML?

To display a PDF in HTML, point a native `<iframe>`, `<embed>`, or `<object>` tag at the PDF’s URL and set `type="application/pdf"`. The `<iframe>` tag is the quickest:

```html

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

```

For the widest browser support, combine `<object>` with an `<iframe>` fallback. For annotations, form filling, search, or digital signatures, use a JavaScript PDF viewer like [Nutrient Web SDK](https://www.nutrient.io/guides/web.md). The rest of this guide covers all six approaches in detail.

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:

```html

<object
  data="https://example.com/test.pdf#page=2"

  type="application/pdf"
  width="100%"
  height="100%"

>

  <p>
    Your browser does not support PDFs.
    <a href="https://example.com/test.pdf">Download the PDF</a>.
  </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:

```html

<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-4--combine-object--iframe-for-full-fallback-coverage)).

## 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:

```html

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

```html

<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

Use this approach in 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 — Use Google Docs viewer

Google Docs viewer renders PDFs on Google’s servers and delivers them in an iframe. This means users don’t need a native PDF viewer — it works on any device with a browser and internet access:

```html

<iframe
  src="https://docs.google.com/viewer?url=https://example.com/test.pdf&embedded=true"
  width="100%"
  height="600px"
  style="border: none;"
></iframe>

```

Replace `https://example.com/test.pdf` with the publicly accessible URL of your PDF. The file must be reachable by Google’s servers — it can’t be on `localhost` or a private network.

### Pros

- No browser PDF support required — Google renders it server-side.

- Works on mobile devices that don’t have a built-in PDF viewer.

- Simple to implement — no libraries or installation needed.

### Cons

- Requires internet access and Google’s availability — not suitable for offline or air-gapped use.

- The PDF URL is sent to Google’s servers — don’t use for sensitive or private documents.

- Google may throttle or temporarily block repeated requests on high-traffic pages.

- No UI customization — you get Google’s viewer chrome.

- Doesn’t work with PDFs behind authentication or on localhost.

- Undocumented endpoint — Google has never formally published the `docs.google.com/viewer?url=…&embedded=true` pattern, so it can change or be removed without notice.

### When to use

Use this method for publicly accessible PDFs where maximum device compatibility matters and privacy is not a concern — for example, embedding a public whitepaper or brochure on a marketing page.

Do not use Google Docs viewer for confidential documents. The PDF URL is processed by Google’s servers and may be cached or logged.

## Problems with native HTML embedding

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

| Limitation                       | Why it matters                                                                                                                                                                                                                             |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Lack of customization**        | The browser’s built‑in PDF viewer UI can’t be styled, themed, or extended.                                                                                                                                                                 |
| **Inconsistent browser support** | Most modern browsers have built-in PDF viewers, but behavior differs — older Android WebViews may not render PDFs inline, and mobile browsers handle gestures, toolbars, and download buttons differently from their desktop counterparts. |
| **Limited API parameters**       | Only a handful of URL fragments (e.g. `#page=2`) are understood, and support is inconsistent — Safari often ignores them.                                                                                                                  |

If you’re looking for a complete reference of parameters, check out the [Parameters for Opening PDF Files](https://pdfobject.com/pdf/pdf_open_parameters_acro8.pdf) specification published by Adobe in 2007.

## Method 6 — Upgrade to a JavaScript PDF viewer for pro features

Need annotations, form filling, search, or redaction? The native tags can’t do any of that — swap them for a JavaScript PDF viewer. **We recommend [Nutrient Web SDK](https://www.nutrient.io/guides/web.md)**, a commercial drop-in viewer with consistent cross-browser rendering, a customizable UI, and APIs for annotations, forms, digital signatures, redaction, and real-time collaboration:

```html

<div id="nutrient-viewer" style="width: 100%; height: 600px;"></div>
<script src="nutrient-viewer.js"></script>
<script>
  NutrientViewer.load({
    container: document.getElementById("nutrient-viewer"),
    document: "https://example.com/test.pdf"
  });
</script>

```

That’s the full integration — no viewer files to host, no source forks to maintain, and the same `NutrientViewer.load()` call works in React, Next.js, Vue, Angular, or plain HTML. For framework-specific examples, see our guide on [building a React PDF viewer](https://www.nutrient.io/blog/top-react-pdf-viewers/).

[Start a free trial](https://www.nutrient.io/try) or [book a demo](https://www.nutrient.io/guides/web/demo.md) to see it in action.

#### Open source alternative: PDF.js

If you need an open source option and can live without annotations, forms, or digital signatures, **[PDF.js](https://mozilla.github.io/pdf.js/)** is Mozilla’s renderer — the same engine that powers Firefox’s built-in viewer:

```html

<iframe src="/pdfjs/web/viewer.html?file=/files/test.pdf" width="100%" height="600px"></iframe>

```

PDF.js is free, but you host and maintain the viewer files yourself, UI customization means forking the viewer’s source, and the bundled viewer only loads same-origin files by default — cross-origin PDFs require CORS headers on the PDF host or a proxy. In React, the [`react-pdf`](https://react-pdf.org/) package wraps PDF.js with a component API but inherits the same constraints.

### Pros

- Customizable UI and a documented API for annotations, forms, signatures, and redaction.

- Predictable, consistent rendering across browsers and devices.

- Programmatic control for integrations and automation.

### Cons

- Adds kilobytes (or megabytes) to your JavaScript bundle.

- Requires integration effort; commercial options have 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.

## Best practices for embedding PDFs

A few practical tips for embedding PDFs reliably:

- **Use the correct MIME type** — Set `type="application/pdf"` so the browser knows how to render the file.

- **Keep file sizes small** — Compress images, subset fonts, and strip unused metadata. Aim for under 5 MB.

- **Design for mobile** — Use responsive containers (`width: 100%`, viewport-based heights) and test pinch-zoom behavior.

- **Provide a download fallback** — Always include a download link inside the fallback content so users can grab the file if the viewer fails.

- **Test across browsers** — Verify rendering in Chrome, Safari (desktop + iOS), Firefox, and an Android WebView before shipping.

## 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](https://www.nutrient.io/guides/web/annotations/introduction-to-annotations.md), [interactive PDF forms](https://www.nutrient.io/guides/web/forms.md), [digital signatures](https://www.nutrient.io/guides/web/signatures.md), and more — we recommend you look into commercial alternatives.

Nutrient ships a commercial [HTML5 PDF viewer library](https://www.nutrient.io/guides/web.md) with a customizable UI and documented APIs for annotations, forms, signatures, and redaction. Start with a [free trial](https://www.nutrient.io/try), or browse the [demos](https://www.nutrient.io/guides/web/demo.md) to see what it can do.

## FAQ

#### How do I embed a PDF in HTML without JavaScript?

Use the native object, iframe, or embed tag with `type="application/pdf"`. Copy the code snippets above and replace the `src` or `data URL` with your file.

#### Can I embed a PDF into HTML?

Yes. HTML has three native tags for embedding PDFs — `<iframe>`, `<embed>`, and `<object>` — none of which require JavaScript. Point the tag at your PDF URL and set `type="application/pdf"`. For interactive features like annotations or forms, embed a JavaScript PDF viewer instead.

#### How do you display a PDF on a website?

Upload the PDF to a location your page can reach. Then embed it with an `<iframe>`, `<embed>`, or `<object>` tag pointing to that URL. For a public file with no native viewer on the device, the Google Docs viewer works; for full control over the UI and features, use a JavaScript PDF viewer like Nutrient Web SDK.

#### Which HTML tag offers the best browser support?

A combo of object (primary) and an iframe fallback covers virtually every modern desktop and mobile browser, including Safari on iOS and Chrome on Android.

#### Can I open a PDF on a specific page or zoom level?

Append URL fragments like `#page=2`, `#zoom=100`, or `#toolbar=0` to the PDF URL. Support varies by browser — Chrome and Edge usually honor them, while Safari may ignore some parameters.

#### How can I hide the download button or toolbar?

Native viewers don’t offer reliable UI control. For consistent branding or to hide the UI, switch to a JavaScript viewer such as Nutrient Web SDK or PDF.js.

#### What’s the best way to make embedded PDFs responsive on mobile?

Wrap the viewer in a container div with `width: 100%` and a flexible `height` set via CSS or viewport units. Then allow overflow scrolling or pinch‑to‑zoom as needed.

#### What happens if the browser can’t display PDFs?

Provide a fallback paragraph inside the object or iframe element with a direct download link, so users can still access the document.

#### How large should my PDF be?

Aim for under 5 MB for quick loads on mobile networks. Compress images, subset fonts, and remove unused metadata to shrink the file size.
---

## Related pages

- [The business case for accessibility: Five ways it drives enterprise value](/blog/5-ways-accessibility-drives-enterprise-value.md)
- [Accessibility Untangled Why It Matters Guide](/blog/accessibility-untangled-why-it-matters-guide.md)
- [Ai Document Automation Extraction To Action](/blog/ai-document-automation-extraction-to-action.md)
- [Advanced Techniques For React Native Ui Components](/blog/advanced-techniques-for-react-native-ui-components.md)
- [Auto Tagging And Document Accessibility In Dotnet Sdk](/blog/auto-tagging-and-document-accessibility-in-dotnet-sdk.md)
- [Best Document Viewers](/blog/best-document-viewers.md)
- [The CEO’s AI playbook: Why decision architecture beats model selection](/blog/ceo-ai-playbook-decision-architecture.md)
- [Convert One Drive Files To Pdf In Sharepoint](/blog/convert-one-drive-files-to-pdf-in-sharepoint.md)
- [Create Pdfs With React](/blog/create-pdfs-with-react.md)
- [Complete Guide To Pdfjs](/blog/complete-guide-to-pdfjs.md)
- [The CTO’s AI playbook: Why accountability architecture beats orchestration](/blog/cto-ai-playbook-accountability-architecture.md)
- [Digital Signatures](/blog/digital-signatures.md)
- [Document Viewer](/blog/document-viewer.md)
- [Document Ai Vs Ocr](/blog/document-ai-vs-ocr.md)
- [Emerging threats: Your logging system may be an agentic threat vector](/blog/emerging-threats-your-logging-system.md)
- [How To Build A React Powerpoint Viewer](/blog/how-to-build-a-react-powerpoint-viewer.md)
- [or](/blog/how-to-build-a-nextjs-pdf-viewer.md)
- [or](/blog/how-to-build-a-javascript-pdf-viewer-with-pdfjs.md)
- [or](/blog/how-to-convert-html-to-pdf-using-react.md)
- [How To Build A Reactjs Viewer With Pdfjs](/blog/how-to-build-a-reactjs-viewer-with-pdfjs.md)
- [How To Convert Html To Pdf Using Html2pdf](/blog/how-to-convert-html-to-pdf-using-html2pdf.md)
- [or](/blog/how-to-convert-html-to-pdf-using-wkhtmltopdf-and-python.md)
- [How To Convert Word To Pdf In Nodejs](/blog/how-to-convert-word-to-pdf-in-nodejs.md)
- [How To Create Pdfs With React To Pdf](/blog/how-to-create-pdfs-with-react-to-pdf.md)
- [or](/blog/how-to-build-a-reactjs-pdf-viewer-with-react-pdf.md)
- [How To Generate Pdf From Html With Nodejs](/blog/how-to-generate-pdf-from-html-with-nodejs.md)
- [How To Embed A Pdf Viewer In Your Website](/blog/how-to-embed-a-pdf-viewer-in-your-website.md)
- [base_url tells WeasyPrint where to resolve relative asset paths](/blog/how-to-generate-pdf-reports-from-html-in-python.md)
- [Html In Pdf Format](/blog/html-in-pdf-format.md)
- [Linearized Pdf](/blog/linearized-pdf.md)
- [Nutrient Vs Conga Composer](/blog/nutrient-vs-conga-composer.md)
- [Pdf Page Labels](/blog/pdf-page-labels.md)
- [Online Document Viewer](/blog/online-document-viewer.md)
- [Pdfjs Coordinate Systems Pdf To Screen](/blog/pdfjs-coordinate-systems-pdf-to-screen.md)
- [Pdf Ua Compliance Guide](/blog/pdf-ua-compliance-guide.md)
- [Pdf Sdk Compliance Security Checklist](/blog/pdf-sdk-compliance-security-checklist.md)
- [Pdfjs React Viewer Setup](/blog/pdfjs-react-viewer-setup.md)
- [Pdf Sdk Performance Benchmark](/blog/pdf-sdk-performance-benchmark.md)
- [Pdfjs Limitations Commercial Upgrade](/blog/pdfjs-limitations-commercial-upgrade.md)
- [Pdfjs Eventbus Guide](/blog/pdfjs-eventbus-guide.md)
- [Pdfjs Text Search Pdffindcontroller](/blog/pdfjs-text-search-pdffindcontroller.md)
- [Pdfjs Navigation Zoom Rotation](/blog/pdfjs-navigation-zoom-rotation.md)
- [Pdfjs Rendering Overlays React Portals](/blog/pdfjs-rendering-overlays-react-portals.md)
- [Process Flows](/blog/process-flows.md)
- [or](/blog/sample-blog-updated.md)
- [Convert an HTML file to PDF.](/blog/top-ten-ways-to-convert-html-to-pdf.md)
- [Web Sdk Is Now Headless](/blog/web-sdk-is-now-headless.md)
- [Wcag2 Accessibility Requirements Documents](/blog/wcag2-accessibility-requirements-documents.md)
- [Vector Pdf](/blog/vector-pdf.md)
- [What Are Annotations](/blog/what-are-annotations.md)
- [Why Your Ai Agent Hallucinates Pdf Table Data](/blog/why-your-ai-agent-hallucinates-pdf-table-data.md)
- [What Is A Vpat](/blog/what-is-a-vpat.md)
- [Why Pdfium Is A Trusted Platform For Pdf Rendering](/blog/why-pdfium-is-a-trusted-platform-for-pdf-rendering.md)
- [What Is Pdf Ua](/blog/what-is-pdf-ua.md)