What is an HTML5 Viewer?

What Is an HTML5 Document Viewer?

Today’s developers face tremendous challenges when it comes to building document and image viewing features into their applications. Considering that the average employee uses multiple apps and programs to accomplish basic tasks, the pressure is on development teams to deliver solutions that can trim this number down to a more manageable level.

But that well-intentioned objective often proves difficult when organizations need to manage dozens of unique file types. Designing an application that can view multiple formats isn’t a simple process. Developers need to understand the distinctive characteristics and requirements of specific file types before they can build reliable viewing support for them. 

All too often, they’re forced to turn to multiple third-party viewing solutions in the form of browser plug-ins or similar workarounds. While this shifts some of the app management load off the user, it creates a number of critical security vulnerabilities and often contributes to a less-than-ideal viewing experience. Key document features like annotation, redaction, and conversion may not be supported, forcing users to rely on other applications rather than providing them with the comprehensive solution they need to scale their business effectively.

Fortunately, the growth of application programming interface (API) technology has contributed to the development of a new kind of viewing solution for online platforms: the HTML5 document viewer. 

Designed to work entirely within a web browser, an HTML5 viewer provides a single-interface interaction for viewing a wide variety of document types. Developers can embed the viewer within their application to deliver viewing and collaboration features on any desktop or mobile device without having to build viewing capabilities from scratch. This makes them an especially attractive choice for solutions that need to add document and content management support, even when development timelines are short.

The biggest advantage of an HTML5 document viewer is its browser-based single interface. There’s no need to build any additional viewing controls, and some viewers even provide whitelabeling capabilities to allow developers to rebrand them and customize available controls. Once a document is uploaded into the viewer, it uses API calls to create a converted file in the desired output, then presents it within the browser with HTML5 markup. Since the files remain completely within the application and are never connected to external programs, the viewer is extremely secure when it comes to sharing documents and images. 

 

For developers, HTML5 viewer integration is a fast and easy way to address viewing needs for multiple file types. Since they can convert a variety of file formats and render them without altering the original content, these viewers are ideal for any industry where native document viewing is critical for compliance purposes.

While developers get a ready-made viewing solution that expands the capabilities of their applications, end-users benefit from a versatile and responsive viewing experience that allows them to view, share, and mark-up documents without having to constantly switch between applications or rely on poorly secured tools like email to facilitate collaboration.

 

How Does an HTML5 Document Viewer Work?

How Does an HTML5 Document Viewer Work?

The basic concept behind how an HTML5 viewer works is quite simple, but the mechanics behind that concept are a bit more complex. Essentially, an HTML5 viewer takes a supported file type, sends it to a server to convert the content into a readable format, and then sends the new document through to the browser interface for viewing. Each HTML5 document viewer works slightly differently, with some simply converting file content into HTML while more sophisticated viewers use SVG, an extensible markup language (XML)-based format that can be easily read and displayed by the viewer.

Many open source HTML5 viewers are quite limited and do little more than rasterize documents in order to view them as images. While this might be helpful for quick viewing, most developers need more viewing functionality within their applications. One of the key differentiating factors for HTML5 document viewers is whether or not they convert documents in ways that allow users to search content and select text.

It doesn’t matter what format the document starts out in. Whether it’s a PDF, OpenDocument, JPEG, or Rich Text Format, the viewer integration can convert any file type its server supports with a simple API call. Although Microsoft Office documents frequently present conversion problems, Accusoft’s PrizmDoc Viewer can interface with a licensed Office installation to render the document accurately without losing any formatting elements.
 


Anatomy of an HTML5 Document Viewer

There are three main components working behind the scenes when an HTML5 viewer prepares a document:

HTML5 Document Viewer
The Viewer

The primary interface for most end-users, this component runs in the web application’s browser to display converted document images.

HTML5 Server
The Server Backend

The engine that makes HTML5 viewing possible, this component does the actual conversions so the viewer can display the document, caches pre-converted content, and manages annotations.

HTML5 Viewer Web Application
The Web Application

Positioned between the viewer and the backend, the developer’s application serves as a reverse proxy that facilitates communication.

When a document is ready for viewing, the HTML5 viewer integration performs a series of REST API calls to prepare the file. First, the web application communicates with the backend to start a new viewing session. Once that’s created, the web app renders the page HTML for the viewer while also delivering the document for conversion. 

In more advanced HTML5 document viewers, it’s possible to start viewing the file before conversion is even complete. As the server begins the conversion process, the viewer requests pages by way of the application web proxy. The server can then send pages through to the viewer as they become available, allowing end-users to view documents without having to wait for the conversion process to finish.

The nature of the HTML5 viewer allows the server to manage a variety of additional document elements such as comments, markups, and other annotations. Since these elements are added through the viewer interface, they don’t actually affect the original document. Instead, the server stores the annotation data until it receives an API call from the web application to create a new document with all of the markups burned in. This new file can then be delivered back to the web application in a variety of formats for further use.

This centralization of markups makes HTML5 document viewers an ideal tool for collaboration. Multiple people can make comments and other annotations without having to download their own copy of the document. That eliminates version confusion and allows the document owner to ultimately decide which annotation marks should be left in place when the time comes to convert the document back into an editable format.

Better Viewing Support

First and foremost, the ability to view a wide variety of file types without having to build conversion capabilities from scratch is a huge advantage for developers. By integrating such a versatile viewing solution into their application, they can address a much broader range of industry use cases and avoid the problem of having to add customized file support for every customer.

Better Viewing Support

Streamlined Performance

Since an HTML5 document viewer can display multiple file types through a single, browser-based interface, developers do away with a number of file-specific viewing plug-ins and configurations. By cutting down on these dependencies, they can improve application performance without compromising the viewing experience. It also allows developers to cut down on the amount of licenses they need from third-party providers, which can help them save on development costs.

Streamlined Performance

Consistent User Experience

For the end-user, the overall viewing experience is an important factor in their decision to embrace or reject a platform. If opening and marking up documents is a hassle, they will be more likely to turn to alternatives. Fortunately, the versatility of an HTML5 viewer integration allows developers to build user-friendly viewing directly into their application to provide an intuitive and consistent user experience. This helps to reduce workflow confusion and ensures that everyone in an organization will be viewing documents the same way.

Consistent User Experience

Enhanced Security and Control

A major advantage of an HTML5 document viewer is that it allows developers to keep sensitive files within a secure application environment. Files never need to be downloaded or opened using an external program. This significantly cuts down on the risk of security gaps as sensitive documents remain safely behind application’s security protocols. Furthermore, since collaborators can view and comment on documents through the shared HTML5 viewer, there’s no need for anyone to download documents or send files through email, which can end up compromising secure data and create version confusion.

Enhanced Security

Maintain File Integrity

When an HTML5 viewer prepares a document for viewing, it actually creates a new version of the document to render within the viewer. This process leaves the original version of the file unaltered. When markups are made within the viewer, the server applies those additions to the converted version, not the original document. Those changes are easy to track, even if they’re being made by multiple users. The ability to view a record of changes to the new document while retaining the unchanged original greatly reduces compliance and regulatory risks related to file integrity.

Maintain File Integrity

Faster Development Time

For developers, one of the biggest advantages of integrating a proven HTML5 document viewer is that it allows them to provide powerful viewing features within their application without spending the time and resources necessary to build them from scratch. By leveraging the capabilities of an HTML5 viewer, development teams can instead focus their resources on building the innovative features that will help their application stand out in a crowded and competitive market.

Faster Development Time
Industry Use Cases for an HTML5 Viewer

Industry Use Cases for HTML5 Document Viewers

An HTML5 document viewer integration can benefit applications used in a wide range of industries. Here are just a few ways developers can enhance their industry-specific solutions:

Enterprise Content Management (ECM) Platforms

An HTML5 viewer can provide a streamlined, centralized interface for viewing, converting, and sharing documents across an organization. Developers can help companies do away with unnecessary licenses and provide a consistent user experience when it comes to document viewing and collaboration.

HTML5 Enterprise Content Management (ECM)

LegalTech Solutions

The on-demand document conversion and markup capabilities of HTML5 viewers make them ideal for eDiscovery tools that need to retrieve and view multiple file types. Annotation and redaction capabilities also allow firms to collaborate and share sensitive documents without putting privacy at risk.

HTML5 Viewer for LegalTech Solutions

FinTech Solutions

The collaboration tools of an HTML5 document viewer allow FinTech developers to build platforms that make it easier for financial services organizations to work across departments without compromising privacy. When integrated into customer-facing applications, an HTML5 viewer also lets customers access financial documents easily and securely.

HTML5 Viewer for Fintech Solutions

Learning Management Systems (LMS)

By integrating HTML5 document viewing into leading educational platforms, developers can empower teachers and students to collaborate more effectively and easily access a wide variety of materials without having to install additional software. Removing the friction from these applications allows users to spend more time focused on learning and teaching rather than worrying about how to share and access files.

HTML5 Viewer for Learning Management Systems (LMS)

Healthcare Systems

Today’s healthcare administration platforms must be able to manage a variety of file types, from scanned patient records to high-resolution diagnostic images. Developers can meet this urgent need by integrating a versatile HTML5 viewer into their electronic health records (EHR) solutions, which allows providers to view, markup, and share documents as part of a streamlined workflow without compromising their compliance requirements.

HTML5 Viewer for Healthcare Systems

See What an HTML5 Document Viewer Can Do for Your Application

Accusoft’s PrizmDoc Viewer is a powerful HTML5 viewer that does everything you’d expect from a viewer and quite a bit more. Combining high-fidelity support for dozens of file types, multiple annotation tools, and redaction capabilities with unique features like web form creation, eSignature support, and OCR conversion, PrizmDoc Viewer can turn any application into a dynamic document management platform without compromising performance or security.

Experience the power of HTML5 viewing for yourself with a free trial of PrizmDoc Viewer. You can try out PrizmDoc Viewer in one of two ways by downloading a trial version to test within your application environment or by scheduling an appointment for a guided, one-on-one demo with one of our solutions experts.