How to Embed PDF in HTML | iframe, Object, and PDF.js

Embedding a PDF in HTML is easiest with the iframe tag, while PDF.js handles advanced features like annotations and forms.

When a client or internal tool needs a PDF to display directly inside a web page—rather than forcing a download—the HTML options are simple and well-supported. The <iframe> tag is the most reliable choice across all modern browsers, with PDF.js serving projects that need annotations, forms, or page-by-page rendering. This guide covers every working method, the code for each, and the exact scenarios where one beats the others.

Embedding a PDF in HTML: What Works in Every Browser

Modern browsers from Chrome and Safari to Edge and Firefox include a built-in PDF viewer, so native HTML tags render a PDF without plugins. Three tags—<iframe>, <object>, and <embed>—each handle the job with different trade-offs for fallback text and markup length. All three require the PDF to be uploaded to your server first, after which you paste its URL into the tag’s source attribute.

The type="application/pdf" attribute is mandatory for <embed> and <object> so the browser knows what it’s handling. Omitting it is the most common reason a PDF downloads instead of displaying inline.

Using the iframe Tag (The Recommended Method)

The <iframe> tag is the most popular choice because it works everywhere and takes one line of code. It creates an inline frame that shows the PDF with the browser’s native toolbar—zoom, download, and page navigation all included.

Step 1: Upload the PDF to your server via your CMS media library or FTP. Copy the direct URL, which will look something like https://yoursite.com/files/document.pdf.

Step 2: Insert the tag where you want the PDF to appear, replacing the src value with your URL. Set width to 100% for responsive layouts and height to at least 600px so the toolbar isn’t clipped on Firefox mobile.

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

The PDF renders inside the framed area with its native toolbar visible at the top. The Anvil team’s recommended approaches for embedding PDFs confirm this as the most compatible starting point for most sites.

Using the object Tag (With Fallback Text)

The <object> tag is the only native HTML method that supports fallback content. If the browser can’t render the PDF—which is rare on modern devices but possible on some Android tablets or very old browsers—the fallback text and download link appear instead.

<object data="https://yoursite.com/files/document.pdf" type="application/pdf" width="100%" height="600px">
  <p>Your browser does not support PDFs. <a href="https://yoursite.com/files/document.pdf">Download the PDF</a>.</p>
</object>

The PDF renders inline. If the browser lacks a native viewer, the fallback text and a clickable download link appear instead of a blank space.

Using the embed Tag (Shortest Markup)

The <embed> tag uses the most concise syntax—a single self-closing tag. It works in every modern browser but has two downsides: no fallback text and no closing tag, which means you can’t add a download link inside it. Use it only when you’re certain your audience uses a modern browser.

<embed src="https://yoursite.com/files/document.pdf" type="application/pdf" width="100%" height="600px" />

The PDF displays directly in the page flow with its native toolbar. Because there’s no fallback, test this on your target devices before publishing.

Native HTML Methods Compared

PDF.js for Advanced Rendering

When a project needs page-by-page navigation, annotations, text selection, or a fully custom interface, PDF.js is the standard. It’s an open-source JavaScript library from Mozilla that renders PDFs using HTML5 Canvas—no browser plugins required. Setup takes a few steps but gives you complete control over how the PDF looks and behaves.

Step 1: Download the latest release from the PDF.js GitHub repository and extract pdf.js and pdf.worker.js to your server.

Step 2: Add a <canvas id="pdf-canvas"></canvas> element to your HTML where the PDF should render.

Step 3: Initialize the library with a short JavaScript snippet that points to your PDF file. The first page renders on the canvas, with controls for navigating, zooming, and rotating.

The first page of the PDF appears on the canvas. Scroll, zoom, and page controls work without any browser plugin. Fallback for older browsers is manual—you’ll need to add a download link yourself.

PDF.js is free under the MIT license and works on Windows, macOS, iOS, Android, Linux, and ChromeOS. The trade-off is setup time: if you just need a quick embed, the <iframe> tag is faster.

Google Drive Integration (No Server Needed)

If the PDF lives in Google Drive and you don’t want to host it on your own server, embedding it takes one extra step: generating a preview URL. This method is useful for internal documents, prototypes, or any situation where you want to avoid file transfers.

Step 1: Upload the PDF to Google Drive, right-click it, select Share, and change permissions to Anyone with link can view.

Step 2: Copy the shareable link. It will look like https://drive.google.com/file/d/FILE_ID/view?usp=sharing.

Step 3: Extract the FILE_ID—the string between /d/ and /view—and build this preview URL: https://docs.google.com/file/d/FILE_ID/preview.

Step 4: Use that preview URL in an <iframe> tag.

<iframe src="https://docs.google.com/file/d/FILE_ID/preview" width="100%" height="600px"></iframe>

The PDF preview appears inside the iframe with Google Drive’s viewer controls. Anyone with the link can view it—no sign-in required.

What About Mobile Browsers?

Mobile browsers handle PDF embeds reliably, but the smaller screen introduces a layout pitfall. On iOS, Safari opens the PDF in its built-in viewer; on Android, Chrome does the same. The problem arises when the iframe height is set too small—Firefox mobile, in particular, hides the PDF toolbar if the height is under about 600px.

The fix is simple: set height to at least 600px (or use min-height: 600px in CSS) and set width to 100% so it scales with the screen. Test on an actual phone before publishing—resizing the browser window in desktop DevTools doesn’t always reproduce the toolbar-clipping behavior.

Common Mistakes and Fixes

Which Method Should You Choose?

The right embed method depends on two things: how much control you need and where the PDF is stored. Here’s the breakdown:

• Need the simplest, most compatible embed? Use <iframe>. It works in every modern browser with one line of code.
• Supporting very old browsers or some Android tablets? Use <object> with fallback text and a download link inside.
• Want annotations, forms, or custom controls? Use PDF.js. It’s the only free option that gives you full control over the viewer interface.
• No server storage for the PDF? Use Google Drive with a preview URL embedded in an iframe.
• Just linking to a download? Use a plain <a> tag. It doesn’t embed the PDF inline, but for downloads that’s exactly what you want.

Every method here is free, works across all major devices and operating systems, and requires no paid subscription. Pick the one that matches your setup and test it on the devices your audience actually uses.