Some test text!

< Web samples

Create Custom Document Annotations using JavaScript

Create custom PDF, Word, Excel, or PowerPoint annotations with this JavaScript sample (no servers or other external dependencies required). Annotations can be customized in several different ways – you can change appearances and behaviors, selection box and control handles. Change one of our pre-built annotations or create your own custom annotations that integrate directly into your workflow. A common example of a custom annotation would be creating a 'complete' annotation stamp that triggers a back-end workflow to mark a task item as complete. This sample works on all browsers (including IE10) and mobile devices without using plug-ins. To see an example visit our custom annotation demo.

Step 1: Get your free trial license key, or sign in

Start Trial
Sign in

Step 2: Add the code:

var viewerElement = document.getElementById('viewer');
var viewer = new PDFTron.WebViewer({
  path: '../../../lib',
  l: window.sampleL,
  pdftronServer: 'https://demo.pdftron.com/', // comment this out to do client-side only
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo-annotated.pdf'
}, viewerElement);

viewerElement.addEventListener('ready', function() {
  window.viewerInstance = viewer.getInstance();
  var viewerInstance = window.viewerInstance;
  var contentWindow = viewerElement.querySelector('iframe').contentWindow;
  window.Annotations = contentWindow.Annotations;
  window.Tools = contentWindow.Tools;

  // ruler.js
  var rulerTool = window.createRulerTool(viewerInstance.docViewer);
  // stamp.js
  var customStampTool = window.createStampTool(viewerInstance.docViewer);

  var addRulerTool = function() {
    // Register tool
    viewerInstance.registerTool({
      toolName: 'RulerTool',
      toolObject: rulerTool,
      buttonImage: '../../../samples/annotation/custom-annotations/ruler.svg',
      buttonName: 'rulerToolButton',
      tooltip: 'Ruler Tool'
    });

    // Add tool button in header
    viewerInstance.setHeaderItems(function(header) {
      header.get('freeHandToolGroupButton').insertBefore({
        type: 'toolButton',
        toolName: 'RulerTool',
        hidden: ['tablet', 'mobile']
      });
      header.getHeader('tools').get('freeHandToolGroupButton').insertBefore({
        type: 'toolButton',
        toolName: 'RulerTool',
        hidden: ['desktop']
      });
    });
    viewerInstance.setToolMode('RulerTool');
  };

  var removeRulerTool = function() {
    // Unregister tool
    viewerInstance.unregisterTool('RulerTool');
    viewerInstance.setToolMode('AnnotationEdit');
  };

  var addCustomStampTool = function() {
    // Register tool
    viewerInstance.registerTool({
      toolName: 'CustomStampTool',
      toolObject: customStampTool,
      buttonImage: '../../../samples/annotation/custom-annotations/stamp.png',
      buttonName: 'customStampToolButton',
      tooltip: 'Approved Stamp Tool'
    });

    // Add tool button in header
    viewerInstance.setHeaderItems(function(header) {
      header.get('freeHandToolGroupButton').insertBefore({
        type: 'toolButton',
        toolName: 'CustomStampTool',
        hidden: ['tablet', 'mobile']
      });
      header.getHeader('tools').get('freeHandToolGroupButton').insertBefore({
        type: 'toolButton',
        toolName: 'CustomStampTool',
        hidden: ['desktop']
      });
    });

    viewerInstance.setToolMode('CustomStampTool');
  };

  var removeCustomStampTool = function() {
    viewerInstance.unregisterTool('CustomStampTool');
    viewerInstance.setToolMode('AnnotationEdit');
  };

  document.getElementById('ruler').onchange = function(e) {
    if (e.target.checked) {
      addRulerTool();
    } else {
      removeRulerTool();
    }
  };

  document.getElementById('custom-stamp').onchange = function(e) {
    if (e.target.checked) {
      addCustomStampTool();
    } else {
      removeCustomStampTool();
    }
  };
});