How to Embed PDF in HTML

Sep 01, 2025

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.

Use HTML’s Elements to Embed a PDF File

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

Use iframe. (online demo)

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

Use embed. (online demo)

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

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.

Convert the PDF to Images or HTML for Embedding

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)

Use PDF JavaScript Libraries to Embed a PDF File

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

We can provide a unified experience for different browsers and platforms.
We can customize the user interface.
We can use more features like PDF annotation and PDF editing.
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:

PDF.js. (online demo)
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

Summary

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