How to Embed PDF in HTML: iframe, JavaScript Libraries, and Cross-Browser Solutions

Embedding a PDF file in HTML is useful since the user can view and edit PDF files right in the browser. In this article, we are going to talk about different ways to do this.

Embed PDF in HTML

What you’ll build: A practical comparison of every method to embed a PDF in HTML — from native <iframe> to full-featured JavaScript libraries — so you can choose the right approach for your project.

Key Takeaways

  • You can embed a PDF in HTML using native elements (iframe, embed, object), server-side conversion, or JavaScript PDF libraries.
  • <iframe> is the simplest implementation but delivers inconsistent results on mobile browsers, where PDFs often trigger a download instead of rendering.
  • JavaScript libraries such as Dynamsoft Document Viewer provide a unified, cross-browser PDF viewing and editing experience with annotation support and download prevention.
  • For enterprise or professional applications, a JavaScript-based PDF viewer gives full control over the UI, security, and feature set.

Common Developer Questions

  • How do I embed a PDF in HTML without using an iframe?
  • How do I make an embedded PDF responsive and mobile-friendly?
  • Which JavaScript library is best for embedding and annotating PDFs in a browser?

Prerequisites

No build tools or server setup are required for the native HTML element approaches. To use Dynamsoft Document Viewer for a fully featured, cross-browser PDF viewer, get a 30-day free trial license before starting.

Embed PDF with Native HTML Elements (iframe, embed, object)

We can use HTML’s built-in elements to embed a PDF file by specifying the URL of the PDF.

  1. Use iframe. (online demo)

    <iframe src="ddv-sample.pdf" width="100%" height="600px"></iframe>

  2. Use embed. (online demo)

    <embed src="ddv-sample.pdf" type="application/pdf" width="100%" height="600px" />

  3. Use object. (online demo)

    <object data="ddv-sample.pdf" type="application/pdf" width="100%" height="600px">
    <p>Your browser does not support PDFs.
        <a href="ddv-sample.pdf">Download the PDF</a>.
    </p>
</object>

iframe is the recommended way to use. It has the best compatibility.

Tag Recommended Fallback Support Issues
<iframe> recommended no will have border by default
<object> more semantic yes may not work for old and mobile browsers
<embed> Less recommended no may not work for old browsers

On the desktop, the browser’s built-in PDF viewer will be used to open the PDF using the three tags. While on the mobile browsers, the behavior varies. On Android, the browsers will give a download link. On iOS, the browsers will render the first page of the PDF.

Embed PDF by Converting to Images or HTML First

We can use libraries like Apache PDFBox to convert PDF files to images or use pdf2htmlex to convert them to HTML beforehand to embed the PDF in HTML.

Converting to images produces either blurred text or monster sized files/network cost. Also, text are logically lost, readers cannot perform searching or copying.

Converting to HTML is better. It can make viewing PDF just like viewing a normal web page. But if you need to edit and annotate the PDF, it is not possible. (the converted sample)

Embed PDF with Full Control Using JavaScript Libraries

We can use third-party PDF libraries to embed a PDF file. It has the following benefits:

  1. We can provide a unified experience for different browsers and platforms.
  2. We can customize the user interface.
  3. We can use more features like PDF annotation and PDF editing.
  4. We can prevent the PDF file from being downloaded for security.

Of course, since the rendering happens on the client side, it has higher requirements for the client.

There are several libraries to use:

  1. PDF.js. (online demo)
  2. PDFium.js. (online demo)

PDF.js and PDFium.js provides PDF rendering functions, but they do not have a decent viewer.

Dynamsoft Document Viewer uses PDFium as the engine and provides full-featured UI to view and edit PDFs. It is the more recommended library to use.

Try the online demo of Dynamsoft Document Viewer

Common Issues and Edge Cases

  • Mobile browsers silently fail to render PDFs: <iframe>, <embed>, and <object> tags do not display PDFs on most Android browsers — they trigger a download prompt instead. Use a JavaScript library such as Dynamsoft Document Viewer for consistent mobile behavior.
  • Cross-origin PDFs are blocked by browser security: Browsers enforce CORS on embedded PDF URLs. If your PDF is hosted on a different domain, ensure it is served with appropriate Access-Control-Allow-Origin headers, or proxy it through your own server.
  • Large PDF files cause performance issues: Rendering a 100+ page PDF entirely client-side can freeze the browser tab. Libraries like Dynamsoft Document Viewer use lazy page loading to avoid this; avoid loading the entire document synchronously when using PDF.js or PDFium.js directly.

Method Comparison: Which Approach Should You Choose?

Here is a summary of the three methods.

Method Technology Pros Cons Best For
Native HTML Elements iframe, object, embed • Simple to implement
• Utilizes browser’s built-in viewer		 • Inconsistent user experience (especially on mobile)
• Limited control over UI and functionality
• No ability to prevent download		 Quick integration where basic viewing is sufficient and consistency across devices is not critical.
Conversion to Images or HTML PDFBox, pdf2htmlEX • Consistent rendering across all browsers
• Feels like a native web page when converted to HTML		 • Loss of functionality (search, copy, edit)
• Can create large files (images) or complex HTML		 Archival documents where preserving visual layout is more important than interactivity.
JavaScript Libraries PDF.js, PDFium.js,
Dynamsoft Document Viewer		 • Most uniform experience across platforms
• Full feature set (annotation, editing, etc.)
• Customizable UI
• Security controls (e.g., disable download)		 • Higher client-side requirements (JavaScript, processing power)
• More complex implementation
• Larger initial page load		 Professional applications requiring a reliable, feature-rich, and customizable PDF viewer with a consistent interface for all users.

Source Code

Get the source code of the demos to have a try:

https://github.com/tony-xlh/Embed-PDF-in-HTML