New: Create and edit Word documents with DOCX Editor in WebViewer
By Apryse | 2022 Dec 22
6 min
Tags
explainer
Sharing PDFs in a website is a great way to reach a large audience. There are various ways to do this, ranging from:
This blog discusses the three embedding options available, starting with the simplest and ending with the PDF viewing bells and whistles.
TLDR
Embedding an HTML PDF viewer to share 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.
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 get you started quickly with sharing PDFs:
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 my-file.pdf with the name of your PDF file.
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
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:
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 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:
For more information, see our 2021 JS PDF Library Evaluation on GitHub.
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:
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.
Check out this blog and decide is PDF.js is the right fit for your project needs.
Free X
Easy ✔
Functionality ✔✔✔
If you require any of the following, consider a commercial solution such as Apryse WebViewer:
Check out this blog to know whether an open source or proprietary PDF viewer engine is right for your organization or not.
If you’re ready to embed Apryse WebViewer into your website, start by downloading WebViewer. 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:
npm install -g http-server
You can now start the server by executing:
http-server -a localhost
The server is hosted on http://localhost:8080
.
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>
<!-- 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. 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 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 this guide.
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:
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 series on YouTube or you can try out the free demo yourself today.
Tags
explainer
Apryse
Related Products
Apryse PDF SDK for Web
Share this post
PRODUCTS
Popular Content