d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Managing Annotations Within PDFs Using Accusoft PDF Viewer

Viewing PDFs natively within applications used to be a major headache for developers. Even though the PDF standard has been open and available for decades, most people still relied upon external reader software and browser plug-ins to open, view, and edit PDF files. Given the complexity of PDF rendering and discrepancies between readers, there was no guarantee that two people viewing the same document would see the same thing.

When Mozilla developed and released PDF.js as an open source library in 2011, developers finally had a way to easily integrate PDF viewing into their web applications to ensure a consistent viewing experience. Even then, however, this JavaScript library didn’t support the entire PDF specification and lacked key features like annotation tools. That may not have presented much of a problem ten years ago, but today’s users no longer regard annotation as a “nice to have” feature. If your web application doesn’t allow them to natively markup or sign documents, they’re liable to turn to more comprehensive solutions pretty quickly.

Problems With Native Browser PDF Viewers

Most modern browsers can render and display PDFs natively without requiring any vulnerable plug-ins made by a third party. By relying on those native browser capabilities, however, you’re opening yourself up to a few problems.

Problem 1: They Take People Out of Your Application

When your application lacks a built-in PDF viewer, opening a PDF file immediately takes users out of your environment and into their browser’s prebuilt viewer. Even if you only need to provide viewing capabilities, relying on the browser’s default viewer surrenders control over how the file is presented. Since each browser handles PDFs in different ways, your users may not get a consistent viewing experience. There’s also no guarantee that they’ll have the same UI, which could become a serious problem if your application expects them to interact with the document in some consistent way.

Problem 2: No Way of Saving User Interactions

While a browser’s PDF viewer may provide some rudimentary annotation tools, there’s no way of saving those interactions once they’re made short of downloading the annotated file as a separate document. Since the viewing layer technically resides outside your web application, viewing instances can’t be saved within it. While the user may be able to mark up a document and save it locally for later use, they won’t be able to perform tasks like collaborating on edits or submitting an eSignature entirely within your application.

Problem 3: Lack of Programmatic Interaction

From a developer standpoint, opening a PDF within the browser’s default viewer is a bit of a dead end in terms of functionality. There’s no way of issuing programmatic commands to perform specialized tasks like saving or retrieving changes made to the document. If all you need to do is allow users to view a PDF file, this may not be an issue, but adding programmatic interaction natively within your own web application can greatly expand its potential use cases.

Adding PDF Annotation Features to Your Web Application

Since PDF.js lacks out-of-the-box support for PDF annotation, developers typically have two choices for adding this functionality: they can build it from scratch or integrate what they need using an existing PDF SDK. Since building PDF rendering and viewing capabilities from the ground up takes time and specialized experience, the second option usually makes more sense.

Here are a few essential features to look for in a PDF SDK:

  • Non-destructive annotations: No matter how annotation tools are implemented, it’s important to make sure they’re not burned into the PDF itself. Even when a unique viewing session is created for a user, the markups need to be stored as a separate layer to ensure that the original document is always accessible.
  • Control over markup storage: Flexibility is everything when it comes to optimizing an application for performance. If developers can’t control where annotation markups are stored for reference and retrieval, they could be faced with errors and slowdown that undermines the user experience.
  • Multiple annotation shapes: Selecting a PDF SDK that provides several unique markup tools can prevent a lot of headaches during the development process. Rather than building each tool from scratch, you can simply add common annotation marks like squares, circles, ovals, circles, and a freehand stylus to the UI toolbar. Specialized signature annotations are also important for adding eSignature capabilities to an application.

Managing Annotations Within a PDF Viewer

Accusoft PDF Viewer is a JavaScript-based PDF SDK developed to provide powerful viewing and annotation capabilities without any cumbersome server dependencies. The lightweight viewer is so easy to implement that it can be integrated into your web-based software with only 10 lines of code:

<script src="https://cdn.jsdelivr.net/npm/@accusoft/pdf-viewer@latest/bundle.js"></script>
<div id="viewer"></div>
<script>
  (async () => {
    const pdfViewer = await window.Accusoft.PdfViewerControl.create({
      sourceDocument: 'https://MyURL.com/MyPDF.pdf',
      container: document.getElementById('viewer')
    });
  })();
</script>

After the initial integration, you can customize which annotation tools you want to feature in the application’s viewing UI by setting the desired tool properties to true. For example, the following code can be used to quickly enable all annotation tools when creating a viewer instance:

(async () => {
 // Create the viewer
 window.myViewer = await PdfViewerControl.create({
   container: document.getElementById('myContainer'),

   // URL or Uint8Array for a PDF
   sourceDocument: YOUR_SOURCE_DOCUMENT

   // Use an 'eval' license key
   licenseKey: 'eval',

   // Configure the annotation tools you want in the UI
   allowedControls: {
     ellipseTool: true,
     freehandDrawingTool: true,
     freehandSignatureTool: true,
     lineTool: true,
     rectangleTool: true
   }
 });
})();

Once integrated into a web-based application, you can use Accusoft PDF Viewer to both save annotations created for a document and then retrieve that document later with the same annotations. Since the annotations are stored in the viewing layer rather than the document itself, the integrity of the original file is preserved.

There are three steps involved with saving annotations currently in the viewer:

  • Call getAnnotations to get an array of annotation objects from the viewer.
  • Convert the array to JSON by passing it to JSON.stringify.
  • Store the JSON somewhere.

Different applications may store the JSON in different ways, sometimes sending it to a REST API that stores it to disk or simply storing it in the browser’s local storage. Integrating annotations using a versatile SDK allows you to make the best decisions for your application.

Here’s an example of a function that could be used to save annotations: 

async function saveAnnotations() {
 // Get a copy of the annotation objects from the viewer
 const annotations = await window.myViewer.getAnnotations();

 // Convert the annotation objects to a JSON string
 const annotationsJson = JSON.stringify(annotations);

 // Store the JSON somewhere, associating it with the
 // document being viewed. For example, you might
 // send it to a REST API you own which saves the
 // annotations for a given document id.
}

It’s usually best to provide an explicit “Save” button or have the application periodically check for and save annotation changes to ensure that you’ll always be able to retrieve the most up-to-date markups.

After annotations have been saved, your application will need to perform a few steps to retrieve them and view them with the original document:

  • Create a new viewer for the document.
  • Retrieve the annotation JSON from storage.
  • Convert the JSON back to an array of annotation objects by passing it to JSON.parse.
  • Call loadAnnotations with the annotation objects to load them into the viewer.

The process will look something like this in code:

(async () => {
 // Create the viewer
 window.myViewer = await PdfViewerControl.create({
   container: document.getElementById('myContainer'),

   // Use the document that was previously annotated
   sourceDocument: YOUR_SOURCE_DOCUMENT // URL or Uint8Array

   // Use an 'eval' license key
   licenseKey: 'eval',

   // Configure any annotation tools you want in the UI
   allowedControls: {
     ellipseTool: true,
     freehandDrawingTool: true,
     freehandSignatureTool: true,
     lineTool: true,
     rectangleTool: true
   }
 });

 // Fetch the annotation JSON from wherever you stored it
 const annotationsJSON = …

 // Convert the JSON back to an array of annotation objects
 const annotations = JSON.parse(annotationsJSON);

 // Load the annotations into the viewer
 await window.myViewer.loadAnnotations(annotations);
})();

Integrating native PDF viewing and annotation into your web-based application allows you to better control the viewing experience and ensure that end-users don’t need to rely on external software to manage or interact with files. By using a versatile SDK like Accusoft PDF Viewer to implement those features, you can spend more of your valuable time working on other innovative aspects of your applications.

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this