Embedding a PDF Viewer in a Website: Options and Considerations

By Isaac Maw | 2025 Aug 07

6 min

Option 1 – Methods for Embedding a PDF in a Website Using HTML

Copied to clipboard

This option is free and easy for developers, but offers bare-bones functionality.

PDF is a widely used format and all modern browsers have built-in PDF support. There are a few methods for embedding a PDF in a website using HTML.

How to use the embed tag to embed a PDF in HTML

The <embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application. The embed tag was deprecated with HTML 4, but was formally reintroduced with the advent of HTML5.

Try this:

<embed
src="contract.pdf"
type="application/pdf"
width="100%"
height="100%"
title="Web PDF Viewer"
/>

To display your PDFs, just ensure the files are in the server directory, similar to how you would add images to your site. This filepath is used in the “src” attribute.

How to use the object tag to embed a PDF in HTML

The <object> tag also defines a container for an external resource. Unlike the embed tag, object provides fallback content for unsupported browsers. The object tag includes additional attributes compared to embed. You can see the fallback content in the sample providing a download link.

You can also use the <param> tag to add parameters to your object element.

Here’s the sample:

<head>  
<title>Title of the document</title>  
</head>  
<body>  
<object type="application/pdf" data="data/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf"  
width="300"  
height="200">  
<a href="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf">download pdf</a>  
</object>  
</body>

How to use an iFrame to display a PDF in HTML

iFrames remain a useful tool for embedding content into webpages. Compared to the other options, iFrames offer more attributes. Here’s a basic way to embed a PDF using an iFrame:

<iframe
src="document.pdf"
width="100%"
height="100%"
style="border:none"
title="Embedded PDF Viewer"
></iframe>

Limitations: Embedding a PDF Viewer in HTML

Copied to clipboard

While embedding PDFs in web pages using HTML provides a quick and easy strategy for sharing PDFs on a website, these methods have some limits:

Results from using a PDF viewer in HTML vary according to the viewer, which means that the viewing experience is not consistent across users, browsers, and devices. Some viewers are better than others.
Loading is slow, particularly with demanding (long or complex) documents.
Embedded PDFs do not provide data for SEO and analytics.
Users cannot interact with the PDF content programmatically.
Not all browsers support PDF embedding. Desktop browsers have very good support, but support on mobile and tablet browsers is poor. Consequently, your PDFs may not be available to all users.

Option 2 – Embed a PDF Viewer in a Website Using an Open-Source Viewer

Copied to clipboard

To add functionality such as text searching, text selection, and zooming, you’ll need to embed a PDF viewer in your site, instead of simply embedding a PDF document in HTML.

PDF.js is a free, open-source PDF viewer for displaying PDFs in a browser using JavaScript. Developed by Mozilla in 2011, PDF.js is maintained by an open-source community.

A PDF.js-based project offers a quick ramp up for modest functionality requirements, but is not cost-effective if any of the following are true:

The web viewer is heavily relied upon in an organizational setting or commercial website.
Feature requirements are advanced.
Users expect functionality to grow over time.
The UX must be a competitive differentiator.
Users expect fast and accurate rendering.
Documents are large and complex.

PDF.js was designed as a PDF reader only; therefore, it does not support features that require editing PDFs, such as annotation, page manipulation, and redaction.

To get started with PDF.js and view code samples, you can visit the PDF.js documentation.

Option 3 – Using a Commercial PDF Viewer SDK: WebViewer

Copied to clipboard

This is the shiny option: a premium, commercial solution provides professional and extensible PDF viewer capabilities for your site.

A commercial solution such as Apryse WebViewer is the best solution if you require any of the following:

High rendering performance.
Rendering accuracy.
A reliable and consistent viewing experience on any platform and with 160+ file formats.
The ability to interact programmatically with PDFs.
Access to hundreds of out-of-the-box features, such as PDF annotations, interactive PDF forms, digital signatures, and more.
Completely customizable UI.

Getting Started with Apryse WebViewer

Copied to clipboard

If you’re ready to embed Apryse WebViewer into your website, dive into the get-started documentation for more detail on installation with your JS framework of choice.

Below are instructions for adding Apryse WebViewer to your React application for robust document capabilities.

Step 1: Install WebViewer

Copied to clipboard

Prior to starting, you should have already installed Node and npm. You should also have a React project to work in. If you do not have one, we recommend following our Vite guide as it is the easiest way to get started.

Generate your WebViewer trial license key here.

To install WebViewer using npm, run the following command in command prompt:

npm i @pdftron/webviewer

Step 2: Copy static assets to your React app directory

Copied to clipboard

We also have to copy the static assets required for WebViewer to run. The files are located in node_modules/@pdftron/webviewer/public and must be moved into a location that will be served and publicly accessible. Typically, this will be a public folder. You can read about how to copy static assets here.

Step 3: Add WebViewer to your React application

Copied to clipboard

In this code sample, we import WebViewer into your component, create a reference where WebViewer will be placed or mounted, and initialize WebViewer inside of a useEffect hook. Ensure that the path property in the constructor points to where you copied your static assets earlier.

import {useEffect, useRef} from 'react';
import WebViewer from '@pdftron/webviewer'

const MyComponent = () => {
  const viewer = useRef(null);

  useEffect(() => {
    WebViewer(
      {
        path: '/lib/webviewer',
        licenseKey: 'YOUR_LICENSE_KEY',
        initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
      },
      viewer.current,
    ).then((instance) => {
        const { documentViewer } = instance.Core;
        // you can now call WebViewer APIs here...
      });
  }, []);

  return (
    <div className="MyComponent">
      <div className="header">React sample</div>
      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
    </div>
  );
};

You can find information about the WebViewer APIs on our API site.

Step 4: View the page

Copied to clipboard

Now that you’ve added WebViewer to your React application, you can run the application and make sure your server is up and running. If you used Vite, your application will be running at http://localhost:5173/.

Conclusion

Copied to clipboard

You can embed a PDF viewer in HTML using HTML tags quickly, easily, and at no cost. If “good enough” PDF sharing isn’t enough for your website and organization, consider embedding a PDF viewer directly in your website for more functionality and better viewing experiences, using an open-source viewer or a commercial solution.

To learn about the full range of Apryse SDK functionality, visit our website. You can also join us on Discord if you have any issues or contact our sales team with any questions.