Photo from Unsplash

Originally Posted On: https://apryse.com/blog/development/embed-pdf-files-or-pdf-viewer-in-website-v2

How to Embed PDF Viewer in a Website

Sharing PDFs in a website is a great way to reach a large audience. There are various ways to do this, ranging from:

1. Easily at no cost, using HTML elements to embed PDFs in your website.
2. Relatively easily at no cost, by embedding an open-source or open-source based PDF viewer in your website.
3. Relatively easily, by embedding a commercial PDF viewer such as the Apryse WebViewer in your website.

This blog discusses these three embedding options, starting with the simplest and ending with the PDF viewing bells and whistles.

TLDR

You get what you pay for.

Embedding a PDF into your HTML has zero cost, but at the expense of functionality. Embedding an open-source, or open-source based, PDF viewer adds greater functionality with no licensing cost, but at the risk of being a dead-end if you later realise that you need advanced features. For advanced PDF features, a consistent viewing experience, unlimited customization, cross-platform support and more, a commercial PDF SDK solution offers most.

1. Embed a PDF in a Website Using HTML

Copied to clipboard

Free

Easy

Functionality X

PDF is a widely used format and all modern browsers have built-in PDF support. We can take advantage of this by using either anchor or inline iframe HTML elements to embed a PDF directly in a web page.

Use the anchor Element

The easiest way to share a PDF file on a website is by using the anchor <a> element. When clicked, a hyperlink or anchor element takes a user to another location on the same page or to a different website.

<a href=”my-file.pdf”>My file</a>

Example <a> element and output

In the above example, the href attribute specifies where the file is located. Substitute the path to my-file.pdf with the path to your PDF file.

Use the Inline iframe Element

The <iframe> element is a container for embedding information from other webpages, either as a full page or a widget:

<iframe id=”inlineFrameExample” title=”Inline Frame Example” width=”300″ height=”200″ src=”https://website.com/my-file.pdf”> </iframe>

Example <iframe> element and output for an HTML PDF viewer

Limitations: Embedding a PDF Viewer in HTML

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.

2. Embed a PDF Viewer in a Website Using an Open-Source or Open-Source Based Viewer

Copied to clipboard

Free

Easy

Functionality 

If you need improved PDF viewing and more functionality, such as text searching and selection, as well as zooming — but still want a zero-fee option — consider embedding a PDF viewer in your website rather than simply embedding PDFs using HTML.

An embedded viewer allows your users to open and view PDF documents directly in the browser, for a seamless user experience.

In this category there are several open-source software or software based on open-source available to you. Examples include:

• PDF.js
• React-PDF

For more information, see our 2021 JS PDF Library Evaluation on GitHub.

Embed a PDF Viewer Using PDF.js

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.

3. Embed a PDF Viewer Using a Commercial Solution

Copied to clipboard

Free X

Easy

Functionality 

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

Check out this blog to know whether an open source or proprietary PDF viewer engine is right for your organization or not.

Get Started with Apryse WebViewer

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.

Want more information on Apryse WebViewer? Check out our comprehensive Buyer’s Guide blog.

How do you add Apryse WebViewer to a Webpage in 5 steps?

1. Set up your server environment.

If you do not have a server, follow these steps:

• Create a folder for your project. (This guide assumes your project is called myServer.)
• Open a terminal in that folder and execute:

npm install -g http-server

You can now start the server by executing:

http-server -a localhost

By default, the server is hosted on http://localhost:8080.

2. Extract the WebViewer package

Extract the package (WebViewer.zip) into your project directory (/myServer).

3. Create a new index.html webpage

Create a new index.html webpage in the same project directory and paste the following code into it:

<!DOCTYPE html> 
<html> 
<head> 
  <title>Basic WebViewer</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
</head> 

<!-- Import WebViewer as a script tag --> 
<script src='WebViewer/lib/webviewer.min.js'></script> 
<body> 
  <div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div> 
</body> 
</html> 

4. Add a script to instantiate WebViewer

To instantiate WebViewer, add this script to the body after the viewer div declaration from the previous step:

<script> 
  WebViewer({ 
    path: 'WebViewer/lib', // path to the PDFTron 'lib' folder on your server 
    licenseKey: 'Insert commercial license key here after purchase', 
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf', 
    // initialDoc: '/path/to/my/file.pdf', // You can also use documents on your server 
  }, document.getElementById('viewer')) 
  .then(instance => { 
    const { documentViewer, annotationManager } = instance.Core; 

     // call methods from instance, documentViewer and annotationManager as needed 
     // you can also access major namespaces from the instance as follows: 
     // const Tools = instance.Core.Tools; 
     // const Annotations = instance.Core.Annotations; 

     documentViewer.addEventListener('documentLoaded', () => { 
     // call methods relating to the loaded document 
    }); 
  }); 
</script> 

5. View the page

Make sure your server is up and running.

If using the server option from step 1, open http://localhost:8080/index.html on your browser. If you already have the page open, refresh the page.

You should see WebViewer appear.

For more information on using WebViewer, refer to this guide.

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.

Check out these resources for more information on all the options we provided in this blog:

• HTML basics
• PDF.js
• Apryse WebViewer

We hope you found this blog useful. If you’d like to share your experiences with embedding PDFs in your website, either using an HTML PDF viewer or an embedded PDF viewer, drop us a line.

If you’d like to see Apryse WebViewer in action, we have a demo video series on YouTube or you can manipulate your own docusments right now in the interactive demo with WebViewer showcase.

To learn about the full range of Apryse SDK functionality, visit our website.