Skip to Main Content

Expand Your PDF Capabilities with JavaScript PDF Annotation Tools

JavaScript PDF annotation

Ever since Mozilla’s development of the open-source PDF.js library in 2011, many developers have been quick to utilize the JavaScript-based toolkit to quickly integrate PDF viewing capabilities into their applications. Given the severe limitations and security concerns associated with external reader plug-ins, it’s easy to see why the open source library was so appealing. 

Unfortunately, many development teams that lacked experience with document management and image rendering quickly discovered that PDF.js lacked many of the core features they expected from a PDF reader. Front and center among these capabilities was JavaScript PDF annotation, which is essential for almost any application that manages documents. That’s why Accusoft set out to build a lightweight SDK upon the PDF.js library that, among other things, added a vital annotation layer to the viewer.

Making PDF.js Draw Annotations

The PDF.js library consists of three different layers that all work together to render and display files. A core layer interprets the binary data in a file before passing it on to a display layer that renders the PDF itself into a <canvas> element. The viewer layer provides the main interface that allows people to view and interact with the file. Out of the box, however, the viewing layer doesn’t provide much in the way of functionality. Interaction is fairly limited without substantial extra development work to add capabilities like mobile screen responsiveness or high fidelity zoom. The core and display layers also don’t display the full PDF specification and struggle with lengthy documents and image-intensive files.

When our team started developing Accusoft PDF Viewer, the very first step was to shore up those support and rendering deficiencies. After making a number of key optimizations to improve rendering speed and fidelity, search speed, and mobile responsiveness, adding a PDF.js annotation layer was among the first priorities. This process was made a bit easier since Accusoft PDF Viewer uses a custom-built viewing layer rather than the default PDF.js viewing layer. In addition to providing a number of performance benefits, building a new viewer gave the team a great deal of control over how users can view and interact with documents.

One of the primary goals of developing this lightweight PDF SDK was that functionality could not come at the expense of performance. The new layer for JavaScript PDF annotations sits atop the PDF.js library, which preserves rendering speed and fidelity while also making it easy for developers to access and utilize annotation features. Since the rendered document is easily accessible, any annotations associated with it can still be retrieved and loaded within the viewing layer.

Anatomy of JavaScript PDF Annotations in Accusoft PDF Viewer

The Professional version of Accusoft PDF Viewer supports multiple different types of annotations, all of which can be incorporated into the customized user interface. This allows developers to quickly integrate PDF viewing capabilities into web applications, enable annotation controls, and then retrieve and load markups whenever the file is retrieved for viewing. 

In order to retrieve JavaScript PDF annotations, developers can use the getAnnotations function. This effectively exports a copy of the annotations made in one viewer so they can be loaded into a different viewer. It’s important to remember that the returned objects are a copy of the annotations, so any changes made to them will not affect the annotations in the original viewer. Furthermore, any changes made to the annotations in the original viewer will not be reflected in the exported versions. To update them, the getAnnotations function would need to be used again.

JavaScript PDF Annotation Tools in Accusoft PDF Viewer Professional

Accusoft PDF Viewer Professional offers several annotation tools. Since the SDK allows developers to customize the viewing interface to fit their application’s needs, one or all of these markup types may be removed from the toolbar if necessary. This may be desirable for situations where a document should only be available for viewing.

  • Ellipse/Circle: A classic oval shape, the ellipse tool can be adjusted in a number of ways to expand its functionality. Developers can set qualities such as opacity, fill color, and border thickness as needed.
  • Rectangle/Square: Typically used to draw boxes around text, the rectangle tool can be customized to meet annotation needs by altering the border thickness and color, adjusting opacity, or designating fill color.
  • Line: Line markups are one of the more versatile annotation types. Accusoft PDF Viewer allows users to not only change the color and thickness of the line, but also to determine whether the line features a triangle end head, which allows it to serve as an arrow.
  • Freehand Signature: Particularly useful for many document management applications, the freehand tool allows users to electronically sign documents or make freehand comments on a PDF. The JavaScript PDF annotation layer tracks the drawing path of the markup as a string value.
  • Free Hand Annotation: The freehand annotation tool allows users to freely draw on a document using their mouse, finger, or stylus. It’s often used to provide quick feedback on a document, especially on mobile devices.
  • Text Highlight: Much like a highlighter pen back in school, the text highlight tool can be used to select and apply a background color to text. When reviewing documents, it can be deployed to highlight sections of content that require closer attention in the future.

Unlock the PDF Potential of Your Application

The customizable PDF features of Accusoft PDF Viewer Professional allow developers to easily integrate powerful annotation capabilities into their application with just a few lines of code. Since the viewer’s JavaScript PDF annotations are made entirely within the web application, there’s no need to configure complicated servers that could impact performance or create additional points of failure. Developers can adjust the viewer interface or even remove the Accusoft branding to create a seamless viewing experience that gives them total control over how their files are viewed and potentially marked up using annotation tools.

Accusoft PDF Viewer was designed with responsive support for mobile displays right out of the box, making it an ideal solution for web applications accessed from multiple devices. It also incorporates three decades of Acusoft’s experience with image processing and document rendering to deliver a viewing experience that’s head and shoulders above open-source PDF.js solutions. Find out how easily your application can add high-performance PDF capabilities by downloading a trial of Accusoft PDF Viewer today.