Some test text!

Dec 22 2022

How to Embed PDF Files or a PDF Viewer in an HTML Website

by PDFTron

Blog post banner image for embed PDF in a website blog

Sharing PDFs in a website is a great way to reach a large audience. There are a few ways you can 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 in your website. 

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

TLDR 

Using HTML to embed PDFs shares your PDFs right away at no cost — at the expense of functionality. Embedding a PDF viewer in your website gets you more functionality at no cost, if you’re ready to use a PDF viewer that is open source or based on open source. If you need advanced PDF features, a consistent viewing experience, unlimited customization, cross-platform support and more, a commercial PDF SDK solution may be the answer.  

1. Embed a PDF in a Website Using HTML 

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 a few HTML elements to embed a PDF directly in a web page.  

Any of the following HTML elements will get you started quickly with sharing PDFs: 

  • anchor  
  • inline iframe 

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>
Image of an HTML demo

Example <a> element and output

In the above example, the href attribute specifies where the file is located. Substitute my-file.pdf with the name of 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>
Image of <iframe> element and output example

Example <iframe> element and output

Limitations of Embedding PDFs with 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:    

  • PDF viewing will vary according to the viewer, which means that the viewing experience will not be consistent across users, browsers, and devices. Some viewers are better than others.  
  • Loading may be 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 

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 —you might consider embedding a PDF viewer in your website over 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, open-source software or software based on open source is available to you. For instance: 

  • PDF.js 
  • React-PDF 

For more information, see our

on GitHub.  

Embed a PDF Viewer Using PDF.js 

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

A PDF.js-based project may offer a quick ramp up for modest functionality requirements. It may not prove cost-effective if any of the following are true: 

  • The web viewer will be heavily relied upon in an organizational setting or commercial website 
  • Feature requirements are advanced 
  • Users will expect functionality to grow over time 
  • The UX needs to be a competitive differentiator 
  • Users expect rendering speed and accuracy 
  • Documents are large and complex 

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

3. Embed a PDF Viewer Using a Commercial Solution 

Free X 

Easy ✔  

Functionality ✔✔✔

If you require any of the following, then you may wish to consider a commercial solution such as

 

  • 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 code 

For information about whether an open source or proprietary PDF viewer engine is right for your organization, see our

.  

Getting Started with PDFTron WebViewer 
 

If you’re ready to embed PDFTron WebViewer into your website, get started by

WebViewer. To save you time, here are the instructions. Feel free to dive into the
get-started documentation
for more detail on installation with your JS framework of choice.

1. Ready your server environment. If you do not have a server, follow these steps: 

  • Create a folder for your project. (This guide will assume 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

The server will be hosted on

 

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

3. Create a new index.html webpage in the same project directory and paste this inside: 

<!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> 

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

4. 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. Make sure your server is up and running. If you are using the server option from step 3, open http://localhost:8080/index.html on your browser. If you already have the page open, refresh the page. You should see WebViewer start up.

For more information on using WebViewer, refer to

Wrap up 

You can embed PDFs into web pages using HTML tags quickly, easily, and at no cost. If “good enough” PDF sharing isn’t enough for your website and organization, you might 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: 

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

. If you’d like to see PDFTron WebViewer in action, we have a
demo series
on YouTube or you can try out the free
demo
yourself today.  

Related articles

thumbnail

How to Build a Flutter PDF Viewer

This guide shows you your options to build a Flutter PDF viewer and your potential best path forward towards a professional solution.

thumbnail

How to Embed PDF Files or a PDF Viewer in an HTML Website

This blog discusses the three options for embedding PDF files or a PDF viewer in a website that are available to you, starting with the simplest and ending with the PDF viewing bells and whistles.

thumbnail

How to Extract Text from PDFs Using Python

A tutorial on how to extract text from a PDF using Python and the PDFTron SDK for machine learning.

PDFTRON

Related Products

Share this post

Upcoming Webinar: PDFTron SDK Tech Review | Nov 29, 2022 at 2 pm ET

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use