Some test text!

menu

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. Learn more about our JavaScript PDF Library.

Get StartedSamplesDownload

To run this sample, get started with a free trial of PDFTron SDK.

JavaScript

HTML

WebViewer({
  path: '../../../lib',
  pdftronServer: 'https://demo.pdftron.com/', // comment this out to do client-side only
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
}, document.getElementById('viewer'))
  .then(function(instance) {
    // ruler.js
    var rulerTool = window.createRulerTool(instance);
    // stamp.js
    var customStampTool = window.createStampTool(instance);

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

      // Add tool button in header
      instance.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']
        });
      });
      instance.setToolMode('RulerTool');
    };

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

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

      // Add tool button in header
      instance.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']
        });
      });

      instance.setToolMode('CustomStampTool');
    }

    function removeCustomStampTool() {
      instance.unregisterTool('CustomStampTool');
      instance.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();
      }
    };
  });
close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.