All You Need To Know About WebViewer

What is WebViewer?

WebViewer by Apryse is a powerful JavaScript PDF library that allows users to view, annotate, and edit PDFs, Office documents, CAD files, and other file formats directly in a web browser.

WebViewer is often embedded in web applications to provide these capabilities without requiring the user to install additional software. The viewer supports a variety of features, such as text search, annotations, form filling, and digital signatures, among others.

The functionality is designed to be platform-independent, compatible with multiple developer frameworks, and works across major browsers, which makes it a flexible solution for developers looking to add document-handling capabilities to their web applications.

In this blog, we cover the following topics:

Viewing Capabilities: WebViewer supports various file formats, including PDFs, Office documents, CAD files, images, and more. The viewer provides high-fidelity rendering, ensuring documents appear as they would in their native applications.

Learn more about viewing PDF layers in WebViewer. Read the blog.

Redaction: Remove or obscure confidential or sensitive information before publication or distribution.

DOCX Editing: Create new or edit existing native DOCX documents in any web application without conversion to intermediate formats, server-side processing, or embedding third-party dependencies.

Annotation and Collaboration: WebViewer allows users to annotate documents with highlights, freehand drawing, comments, and dozens of other annotations, including custom annotation types. These annotations can be serialized to XFDF (a standard PDF annotations format) and can be stored for later or shared for collaborative purposes.

Form Filling: WebViewer supports interactive form filling, allowing users to fill in PDF form fields directly within the viewer.

Editing: Text editing and document assembly features are also provided. Users can modify text, split and merge PDF documents and, edit and reflow the style of text.

Measurement and CAD Viewing: WebViewer supports viewing and measuring CAD drawings directly in the browser, making it useful for engineering or construction use cases.

Customizable Open-SourceUI: The viewer's user interface can be customized to suit the needs of the application it's embedded in, offering a range of out-of-the-box options to modify the toolbars, themes, and more.

Search: Full-text document search capabilities including regex, make it easier for users to navigate through documents.

Secure Signing: Documents can be digitally signed, and the viewer supports PDF encryption and permissions.

Cross-Platform and Cross-Browser Support: As a JavaScript-based tool, WebViewer is designed to be platform-independent and is compatible with most major browsers.

See these features in action in our WebViewer Showcase.

Since WebViewer is a JavaScript-based document viewer that can be embedded in web applications, it primarily integrates with other systems through the web application in which it is embedded.

Here are some ways WebViewer can interact with other systems:

REST APIs: WebViewer can interact with RESTful APIs to fetch documents from other systems, save documents back to those systems, or perform other interactions. This allows it to be used in conjunction with a wide variety of backend systems, from databases to content management systems and more.

JavaScript Interactions: As a JavaScript library, WebViewer can interact with other JavaScript code running in the browser. This includes interacting with other JavaScript libraries and frameworks, making it highly flexible.

Server-Side Operations: For some operations, WebViewer can leverage Apryse’s server-side SDKs. For example, for real-time collaboration features, changes made in the WebViewer can be serialized to XFDF (a standard format for PDF annotations), sent to a server, and then distributed to other users.

WebHooks: For certain operations, your application can configure WebHooks to notify another application or system when a specific event occurs in WebViewer.

WebViewer is designed to be used in the context of a web page -- hence, it uses HTML5 and CSS3 for its user interface. As a JavaScript library, it can interact with any other JavaScript code on the page, and it can utilize any web APIs that are accessible to JavaScript code.

WebViewer uses HTML5 features like the Canvas API and the Fetch API for rendering documents and loading data. It also uses CSS3 for styling its user interface and making it responsive. Its use of JavaScript enables it to provide interactive features like form filling, annotations, and more.

As with any web-based tool, the specific APIs and web technologies that WebViewer can interact with will depend on what is supported by the user's browser. However, WebViewer is designed to work with a wide range of modern browsers, so it should be compatible with any web APIs that these browsers support.

WebViewer is fundamentally a JavaScript-based library and can be incorporated into any application that can interact with JavaScript. This includes applications built with plain JavaScript as well as various JavaScript frameworks.

React: React is a popular JavaScript library for building user interfaces, particularly single-page applications. You can use WebViewer with React to integrate complex document viewing and interaction within a React application.

Angular: Angular is a platform for building web applications. It provides a framework for client-side MVC and MVVM architectures. You can use WebViewer in an Angular application to add document viewing capabilities.

Vue.js: Vue.js is a JavaScript framework for building user interfaces. Like with the other frameworks, you can use WebViewer in a Vue.js application.

Apart from these, since WebViewer is JavaScript-based, you can integrate smoothly with other frameworks incluxing: cordova, electron, svelte, nuxt-js, blazor, typescript, node.js.

WebViewer can be completely customized to fit any user's unique needs. Here are a few things you can tailor:

Out-of-the-box Customization: You can change the look and feel of the WebViewer UI. You can add, remove, or rearrange buttons in the toolbar, add custom controls, change themes, and more.

Open-source UI Customization: free sandboxing for changing the source code

User Permissions: You can control what features are available to the users. For instance, you might enable or disable annotation tools, printing, downloading, etc., based on your application's requirements.

Custom Annotations: WebViewer provides a rich set of tools for annotating documents. You can customize these tools, add new custom annotation types, change the behavior of existing ones, and more.

Localization: WebViewer includes a large number of langugae transaltions. For any that are not included, you can localize the WebViewer interface by providing translations for different languages.

Event Handling: You can add custom behavior to WebViewer by handling events. For instance, you could execute custom code whenever a user selects a text, adds an annotation, etc.

Integration with your own code: Since WebViewer is a JavaScript library, you can use its APIs to interact with your own JavaScript code. This allows you to add any custom behavior you need.

Learn how to add custom buttons to the WebViewer UI.

WebViewer is typically embedded in web applications that require advanced document-handling capabilities. Here are some examples:

Document Management Systems: In a Document Management System (DMS), WebViewer can be used to display various types of documents(word office,image, PDF etc.) for viewing and editing without requiring users to download files or use external applications. It also provides annotation tools that can be used for commenting or reviewing documents.

Collaboration Platforms: In online collaboration platforms, WebViewer can be used to enable real-time collaboration on documents. Multiple users can view and annotate the same document, with changes visible to everyone in real-time.

Educational Platforms: In an e-learning system, teachers and students could use WebViewer to view, share, and annotate documents or textbooks. It would be particularly useful for remote learning situations.

Healthcare Portals: In a patient portal, healthcare providers could use WebViewer to share medical reports and other documents with patients. The annotation features can be used to highlight important sections and add explanatory notes.

Legal Platforms: In a legal software platform, lawyers could use WebViewer to review contracts and other legal documents. They can annotate directly on the documents and even use it to redact sensitive information.

Government Services: Government agencies could embed WebViewer in their online services to let users fill out PDF forms, sign documents electronically, or view official documents and regulations.

Real Estate Platforms: In a real estate application, agents and clients could use WebViewer to view and annotate property documents, contracts, floor plans, etc.

Construction or Engineering Applications: In applications related to construction or engineering, CAD drawings could be viewed and annotated directly in the web application using WebViewer.

Learn how Apryse WebViewer enhances the Appian case management solution. Read the blog.

Overall, WebViewer is a robust and dynamic tool aimed at transforming how documents are handled within web applications. WebViewer elevates the user experience by enabling the viewing, annotating, and editing of various document types right in the browser, eliminating the need to download files or switch between applications.

If you have any questions or are ready to take the plunge and add WebViewer, please contact our sales team.