In this article, we'll cover five methods for embedding PDFs, along with step-by-step instructions, annotated code snippets, and examples of integrating advanced features using the Nutrient SDK.

PDF files are widely used in industries like healthcare, education, and government. Displaying PDFs directly on your website ensures seamless document sharing without requiring users to download files first. However, embedding PDFs can be tricky due to the differences between HTML and PDF formats.
Embedding PDFs on websites is a practical way to deliver content without downloads. Common applications include:
-
User manuals — Provide product guides directly on websites for easy access.
-
Contracts — Display fillable legal documents for seamless online submission.
-
Marketing materials — Showcase brochures or catalogs interactively.
-
Educational resources — Share eBooks, research papers, or training materials.
-
Reports — Present financial statements or annual reports professionally.
-
Event flyers — Embed schedules or promotional materials for quick viewing.
With tools like Nutrient Web SDK, these PDFs become more interactive, secure, and user-friendly, making it easier to enhance the viewer experience.
Additionally, you can follow along with our step-by-step video tutorial for detailed guidance.
1 — Embedding using the embed tag
The <embed>
tag is used to load external content, including PDFs, directly into a webpage. Here’s an example:
<embed src="document.pdf" type="application/pdf" width="100%" height="1000" title="Embedded PDF Viewer" />
Key attributes
-
src
— Specifies the PDF file’s location. -
type
— Defines the file type (for PDFs, useapplication/pdf
). -
width
andheight
— Controls the viewer’s size within the parent container.
Use case
This method is simple to implement and works well in most modern browsers. Ensure the parent container has defined dimensions to avoid display issues.
Example for embedding a PDF file using the <embed>
tag:
2 — Embedding using the object tag
The <object>
tag provides a versatile way to embed PDFs while offering fallback content for unsupported browsers:
<object data="document.pdf" type="application/pdf" width="100%" height="1000" title="Embedded PDF Viewer" > <p> Your browser does not support PDFs. <a href="document.pdf">Download the PDF</a> </p> </object>
Key features
-
data
— Specifies the PDF file’s location. -
Fallback content — Displays alternative text or links when PDFs aren’t supported.
Use case
Ideal for environments requiring backward compatibility and fallback mechanisms.
3 — Embedding using the iframe tag
An <iframe>
embeds web content, including PDFs, into a webpage. Example:
<iframe src="document.pdf" width="100%" height="100%" style="border:none" title="Embedded PDF Viewer" ></iframe>
To disable the toolbar, append #toolbar=0
to the src
attribute:
<iframe src="document.pdf#toolbar=0" width="100%" height="100%" style="border:none" title="Non-downloadable PDF Viewer" ></iframe>
Use case
Highly customizable for modern web applications. Offers flexibility in layout and URL parameter-based configurations.
4 — Combining object and iframe tags
Combining <object>
and <iframe>
tags leverages the strengths of both elements. Here’s an example:
<object data="document.pdf" type="application/pdf" width="100%" height="100%" title="Embedded PDF Viewer" > <iframe src="document.pdf" width="100%" height="100%" style="border: none" title="Fallback PDF Viewer" > <p> Your browser does not support PDFs. <a href="document.pdf">Download the PDF</a> </p> </iframe> </object>
Use case
Best for ensuring maximum compatibility. Combines the fallback capabilities of <object>
with the customization options of <iframe>
.
5 — Linking with the a tag
The simplest approach is linking to the PDF directly using an <a>
tag:
<p>
Open a PDF file
<a href="document.pdf">example</a>
</p>
Use case
Useful when embedding isn’t necessary, and direct access to the PDF file suffices. Best for scenarios prioritizing simplicity.
Comparison of PDF embedding methods
This table summarizes the pros and cons of each embedding method:
Method | Pros | Cons |
---|---|---|
<embed> |
- Simple to implement - Supported across most major browsers |
- Limited control over viewer features - Some browsers may not display PDFs if plugins are disabled |
<object> |
- Provides fallback content - Better compatibility with older browsers |
- Fallback content can affect user experience - Limited control over viewer features |
<iframe> |
- Highly customizable - Control over appearance with URL parameters - Flexibility with width and height |
- #toolbar=0 may not be supported by all viewers- Users might still find ways to download PDFs |
<a> |
- Extremely simple - Ensures users can access the PDF |
- Does not embed the PDF - Users need to download or open the PDF in a new window |
<object> + <iframe> |
- Provides a fallback for unsupported browsers - Combines benefits of both <object> and <iframe> |
- More complex to implement - May result in duplicate content if both methods are supported |
Problems with these PDF embed methods
When embedding PDF files in HTML documents using tags like <embed>
and <object>
or iframes, there are several limitations and drawbacks to consider.
-
Limited API and customization options
Traditional embedding methods provide only a minimal set of API methods, and many attributes are now deprecated. Additionally, you have no control over the PDF viewer’s user interface (UI). The browser decides which PDF reader to use, making it difficult to customize the look and feel.
-
Dependence on browser plugins
Many modern browsers no longer support plugins like Adobe Flash, making it unreliable to embed PDFs using <embed>
or <object>
tags. Browser vendors may continue to reduce support for these tags, posing potential compatibility issues in the future.
-
Security issues with iframes
Embedding PDFs in iframes comes with security risks, such as clickjacking attacks, where users are tricked into interacting with a hidden iframe instead of a visible UI element. Implementing security measures (e.g. X-Frame-Options
headers) can help mitigate some of these risks.
Additional limitations and considerations
Embedding PDFs in HTML involves several other limitations:
-
Browser compatibility — Not all browsers support PDF embedding in the same way, leading to inconsistent user experiences across devices.
-
Performance — Large and complex PDFs can slow down page load times, impacting user experience. Optimizing PDFs for web use can help mitigate these issues.
-
Security risks — Embedded PDFs could contain malicious code or viruses, so it’s essential to source files from trusted locations and use security precautions.
-
Accessibility — PDFs embedded through traditional methods may not be accessible to users with disabilities, which limits usability for a broader audience. Enhancing accessibility through HTML, CSS, and JavaScript is important.
Enhancing embedded PDFs with JavaScript
While embedding PDFs using basic HTML tags like <embed>
, <object>
, and <iframe>
is an easy and fast method for displaying PDF files on a website, Nutrient Web SDK offers several advantages for users looking for more advanced features, enhanced control, and a better user experience.
Below is a breakdown of why you might choose Nutrient over native HTML methods.
1. Enhanced PDF viewer features
-
Advanced navigation — Nutrient offers interactive navigation options such as custom page modes (single page, continuous scrolling) and page zoom features. These are far superior to the basic zoom and page navigation offered by native embedding methods.
-
Annotations and markups — Nutrient’s SDK enables users to add annotations, highlights, text, and other markup to PDF documents, a feature not available in basic HTML embedding.
-
Advanced text search — Nutrient provides robust search capabilities, making it easy to search for text within a PDF document, which is a limitation in basic HTML tags.
2. Customization
-
UI customization — With Nutrient’s SDK, developers can customize the viewer’s UI to match their website design, offering a more seamless integration. Basic HTML embedding methods, on the other hand, provide limited customization of the viewer.
-
Responsive design — Nutrient’s viewer automatically adjusts to various screen sizes, offering a more mobile-friendly experience compared to basic embedding tags.
3. Security
-
Secure PDF viewing — Nutrient’s SDK allows developers to implement secure viewing features like encryption, password protection, and restricted access to certain PDF features. This is crucial for organizations handling sensitive or confidential information. In contrast, native HTML methods offer no security features.
-
No file download option — With Nutrient, developers can disable PDF downloads entirely, preventing unauthorized distribution of a document, while basic HTML tags allow users to easily download embedded PDFs.
4. Performance optimization
-
Faster load time — Nutrient is optimized for fast loading and smooth performance, particularly when dealing with large PDF files. Basic HTML embedding methods can sometimes suffer from slow load times, especially with heavy or complex documents.
5. Cross-browser compatibility
-
Native browser integration — Nutrient ensures full compatibility across modern browsers, handling any quirks or inconsistencies with PDF rendering that can arise from browser-based PDF viewers. Native methods often rely on browser plugins or built-in viewers that might not work as reliably across all browsers.
6. Interactive elements
-
Form filling and data extraction — Nutrient allows for form filling and data extraction from interactive PDFs, a feature unavailable with basic HTML tags. This makes it ideal for applications requiring user input, such as surveys, contracts, or other interactive documents.
Example of our JavaScript PDF viewer
To demo our JavaScript PDF viewer, upload a PDF, JPG, PNG, or TIFF file by clicking Open Document under the Standalone option (if you don’t see this option, select Choose Example from the dropdown). Once your document is displayed in the viewer, try drawing freehand, adding a note, or applying a crop or an eSignature.
Follow the getting started guide to embed Nutrient for PDF viewing and editing in your project.
Comparison table: Nutrient SDK vs. basic HTML embedding methods
Feature | Nutrient SDK | Native iframe / embed methods |
---|---|---|
Interactive PDF viewing | ✔ Fully interactive with zoom, scroll, and multiple page modes | ✖ Basic viewer with limited zoom and scroll |
Annotations and markups | ✔ Full annotation support (highlight, text, shapes) | ✖ No annotation capabilities |
Customization | ✔ Full UI customization (themes, layout) | ✖ Very limited customization |
Security features | ✔ PDF encryption, secure viewing, restricted access | ✖ No security features |
Mobile optimization | ✔ Fully responsive design for all devices | ✖ Limited responsiveness |
Advanced search and navigation | ✔ Text search, table of contents, page thumbnails | ✖ No advanced search or navigation |
Cross-browser compatibility | ✔ Optimized for all modern browsers | ✖ Can be unreliable across different browsers |
Form filling / data extraction | ✔ Yes, for interactive PDFs | ✖ Not available |
Load speed | ✔ Optimized for fast loading of large files | ✖ Can be slow, especially with large PDFs |
User experience | ✔ Smooth, consistent experience across platforms | ✖ Basic, with limited features |
FAQ
Here are a few frequently asked questions about how to embed PDF in HTML.
How to embed a PDF viewer in HTML?
To incorporate a PDF viewer in HTML, use the<embed>
, <object>
, <iframe>
, and <a>
HTML5 elements. Each method offers different functionalities and is supported in most browsers. For more advanced features, consider a commercial PDF viewer library like Nutrient.
How to embed a PDF viewer into your website without the ability to download?
To prevent users from downloading a PDF, use the<iframe>
element and append #toolbar=0
to the URL of your PDF document. This hides toolbar options and restricts downloading.
What is the best method to embed a PDF using an iframe?
The<iframe>
method is recommended for its flexibility. You can customize it with attributes like width
, height
, and style
, and control functionality using parameters such as #toolbar=0
.
How can I embed a PDF in HTML with advanced features?
For advanced features such as annotations and interactive forms, consider using a commercial PDF viewer library like Nutrient Web SDK. It offers extensive functionality and customization beyond basic HTML embedding.Conclusion
This post taught you how to embed a PDF viewer into your website. With <embed>
, <object>
, <iframe>
, and <a>
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 more advanced PDF features — such as PDF annotations, interactive PDF forms, and digital signatures — 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. Check out our PDF library using our free trial, and play around with our demo to see what’s possible.