Annotation in JavaScript PDF Library

24 Jul 202624 minutes to read

The JavaScript PDF Library provides support for interactive annotations. You can add, delete and modify the annotation from the PDF documents.

For first-time setup, refer to the Getting Started with JavaScript PDF Library guide.

Adding annotations to a PDF document

This example demonstrates how to add annotations to a PDF document using the PdfPopupAnnotation class. Adding annotations allows users to include comments, highlights, shapes, and other interactive elements within a PDF, enhancing collaboration and document review.

import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon} from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create a new popup annotation
let annotation: PdfPopupAnnotation = new PdfPopupAnnotation('Review this paragraph',
{x: 10, y: 40, width: 30, height: 30},
{
  author: 'Reviewer',
  subject: 'General',
  color: { r: 255, g: 255, b: 0 },
  icon: PdfPopupIcon.comment,
  open: true
}
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Close the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create a new popup annotation
var annotation = new ej.pdf.PdfPopupAnnotation('Review this paragraph',{x:10,y:40,width:30,height:30},{
  author:'Reviewer',
  subject:'General',
  color:{r:255,g:255,b:0},
  icon:ej.pdf.PdfPopupIcon.comment,
  open:true
});
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Close the document
document.destroy();

Supported annotation types

This example demonstrates how to add a file link annotation to a PDF page using the PdfFileLinkAnnotation class. A file link annotation allows linking to an external file from within a PDF document, enabling users to access related resources directly.

import {PdfDocument, PdfPage, PdfFileLinkAnnotation} from '@syncfusion/ej2-pdf';

// Creates a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Creates a file link annotation
let fileLink: PdfFileLinkAnnotation = new PdfFileLinkAnnotation(
    { x: 100, y: 150, width: 120, height: 18 },
    'logo.png',
    {
        text: 'Open attachment',
        author: 'Syncfusion',
        subject: 'File Link Annotation',
        color: { r: 0, g: 0, b: 255 },
        action: "app.alert('Launching file')"
    });
// Adds annotation to the page
page.annotations.add(fileLink);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Creates a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Creates a file link annotation
var fileLink = new ej.pdf.PdfFileLinkAnnotation({x:100,y:150,width:120,height:18},'logo.png',{
text:'Open attachment',
author:'Syncfusion',
subject:'File Link Annotation',
color:{r:0,g:0,b:255},
action:"app.alert('Launching file')"
});
// Adds annotation to the page
page.annotations.add(fileLink);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

The action property is an Acrobat JavaScript expression evaluated by the PDF viewer (for example, Adobe Reader or Acrobat), not by the Syncfusion library itself.

Free Text Annotation

This example demonstrates how to add a free text annotation to a PDF page using the PdfFreeTextAnnotation class. A free text annotation allows placing text directly on a PDF page, enabling users to add comments or notes that remain visible without requiring interaction.

import {PdfDocument, PdfPage, PdfFreeTextAnnotation, PdfTextAlignment, PdfAnnotationIntent, PdfAnnotationBorder, PdfBorderStyle, PdfLineEndingStyle, PdfFontFamily, PdfFontStyle} from '@syncfusion/ej2-pdf';

// Creates a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create new free text annotation
let freeText: PdfFreeTextAnnotation = new PdfFreeTextAnnotation({ x: 250, y: 260, width: 180, height: 80 },
    {
        text: 'Free Text with Callout',
        annotationIntent: PdfAnnotationIntent.freeTextCallout,
        calloutLines: [{ x: 200, y: 320 }, { x: 260, y: 300 }, { x: 260, y: 260 }],
        lineEndingStyle: PdfLineEndingStyle.openArrow,
        font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular),
        textMarkUpColor: { r: 40, g: 40, b: 40 },
        innerColor: { r: 240, g: 248, b: 255 },
        borderColor: { r: 0, g: 0, b: 0 },
        textAlignment: PdfTextAlignment.left,
        opacity: 1,
        border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
    });
// Adds annotation to the page
page.annotations.add(freeText);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Creates a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create new free text annotation
var freeText = new ej.pdf.PdfFreeTextAnnotation({x:250,y:260,width:180,height:80},{
text:'Free Text with Callout',
annotationIntent:ej.pdf.PdfAnnotationIntent.freeTextCallout,
calloutLines:[{x:200,y:320},{x:260,y:300},{x:260,y:260}],
lineEndingStyle:ej.pdf.PdfLineEndingStyle.openArrow,
font:document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular),
textMarkUpColor:{r:40,g:40,b:40},
innerColor:{r:240,g:248,b:255},
borderColor:{r:0,g:0,b:0},
textAlignment:ej.pdf.PdfTextAlignment.left,
opacity:1,
border:new ej.pdf.PdfAnnotationBorder({width:1,hRadius:0,vRadius:0,style:ej.pdf.PdfBorderStyle.solid})
});
// Adds annotation to the page
page.annotations.add(freeText);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Line Annotation

This example demonstrates how to add a line annotation to a PDF page using the PdfLineAnnotation class. A line annotation allows drawing straight lines between two points on a PDF page, often used to highlight connections or indicate measurements.

The line endings are configured through the PdfAnnotationLineEndingStyle class.

import {PdfDocument, PdfPage, PdfLineAnnotation, PdfAnnotationLineEndingStyle, PdfLineEndingStyle, PdfAnnotationCaption, PdfLineCaptionType} from '@syncfusion/ej2-pdf';

// Creates a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Creates a new line annotation.
let lineAnnotation: PdfLineAnnotation = new PdfLineAnnotation({ x: 80, y: 420 }, { x: 150, y: 420 }, {
    text: 'Line Annotation',
    author: 'Syncfusion',
    color: { r: 255, g: 0, b: 0 },
    innerColor: { r: 255, g: 255, b: 0 },
    lineEndingStyle: new PdfAnnotationLineEndingStyle({ begin: PdfLineEndingStyle.circle, end: PdfLineEndingStyle.diamond }),
    opacity: 0.5
});
// Assigns the leader line
lineAnnotation.leaderExt = 0;
lineAnnotation.leaderLine = 0;
// Assigns the line caption type
lineAnnotation.caption = new PdfAnnotationCaption({ cap: true, type: PdfLineCaptionType.inline });
// Adds annotation to the page
page.annotations.add(lineAnnotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Creates a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Creates a new line annotation.
var lineAnnotation = new ej.pdf.PdfLineAnnotation({x:80,y:420},{x:150,y:420},{
text:'Line Annotation',
author:'Syncfusion',
color:{r:255,g:0,b:0},
innerColor:{r:255,g:255,b:0},
lineEndingStyle:new ej.pdf.PdfAnnotationLineEndingStyle({begin:ej.pdf.PdfLineEndingStyle.circle,end:ej.pdf.PdfLineEndingStyle.diamond}),
opacity:0.5
});
// Assigns the leader line
lineAnnotation.leaderExt = 0;
lineAnnotation.leaderLine = 0;
// Assigns the line caption type
lineAnnotation.caption = new ej.pdf.PdfAnnotationCaption({cap:true,type:ej.pdf.PdfLineCaptionType.inline});
// Adds annotation to the page
page.annotations.add(lineAnnotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Rubber stamp Annotation

This example demonstrates how to add a rubber stamp annotation to a PDF page using the PdfRubberStampAnnotation class. A rubber stamp annotation allows applying predefined or custom stamp to visually indicate the status or purpose of a document.

import {PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfRubberStampAnnotationIcon} from '@syncfusion/ej2-pdf';

// Creates a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Creates a new rubber stamp annotation
let stamp: PdfRubberStampAnnotation = new PdfRubberStampAnnotation({ x: 40, y: 60, width: 80, height: 20 },
    {
        icon: PdfRubberStampAnnotationIcon.draft,
        text: 'Text Properties Rubber Stamp Annotation'
    });
// Adds annotation to the page
page.annotations.add(stamp);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Creates a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Creates a new rubber stamp annotation
var stamp = new ej.pdf.PdfRubberStampAnnotation({x:40,y:60,width:80,height:20},{
  icon:ej.pdf.PdfRubberStampAnnotationIcon.draft,
  text:'Text Properties Rubber Stamp Annotation'
});
// Adds annotation to the page
page.annotations.add(stamp);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Ink Annotation

This example demonstrates how to add an ink annotation to a PDF page using the PdfInkAnnotation class. An ink annotation allows drawing freehand marks or sketches directly on a PDF page. The pointsCollection option defines the actual multi-stroke ink paths; the points argument passed to the constructor represents the bounding geometry that encloses those paths.

import {PdfDocument, PdfPage, PdfInkAnnotation} from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Add a new page to the PDF
let page: PdfPage = document.addPage();
// Create an ink annotation
let annotation: PdfInkAnnotation = new PdfInkAnnotation(
    { x: 50, y: 100, width: 200, height: 150 },
    [
        { x: 60, y: 120 },
        { x: 120, y: 180 },
        { x: 200, y: 160 }
    ],
    {
        text: 'Ink',
        author: 'Syncfusion',
        subject: 'Ink Annotation',
        color: { r: 0, g: 0, b: 255 },
        thickness: 2,
        opacity: 0.8,
        pointsCollection: [
            [
                { x: 60, y: 120 },
                { x: 90, y: 130 },
                { x: 110, y: 140 }
            ],
            [
                { x: 120, y: 180 },
                { x: 150, y: 175 }
            ]
        ]
    }
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Add a new page to the PDF
var page = document.addPage();
// Create an ink annotation
var annotation = new ej.pdf.PdfInkAnnotation(
  {x:50,y:100,width:200,height:150},
  [{x:60,y:120},{x:120,y:180},{x:200,y:160}],
  {
    text:'Ink',
    author:'Syncfusion',
    subject:'Ink Annotation',
    color:{r:0,g:0,b:255},
    thickness:2,
    opacity:0.8,
    pointsCollection:[
      [{x:60,y:120},{x:90,y:130},{x:110,y:140}],
      [{x:120,y:180},{x:150,y:175}]
    ]
  }
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Pop-up Annotation

This example demonstrates how to add a popup annotation to a PDF document using the PdfPopupAnnotation class. A popup annotation displays a textual note anchored to a position on the page.

import {PdfDocument, PdfPage, PdfPopupAnnotation, PdfPopupIcon, PdfAnnotationState, PdfAnnotationStateModel} from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create a new popup annotation
let annotation: PdfPopupAnnotation = new PdfPopupAnnotation('Review this paragraph',
{x: 10, y: 40, width: 30, height: 30},
{
  author: 'Reviewer',
  subject: 'General',
  color: { r: 255, g: 255, b: 0 },
  icon: PdfPopupIcon.comment,
  open: true,
  state: PdfAnnotationState.accepted,
  stateModel: PdfAnnotationStateModel.review
}
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create a new popup annotation
var annotation = new ej.pdf.PdfPopupAnnotation('Review this paragraph',{x:10,y:40,width:30,height:30},{
  author:'Reviewer',
  subject:'General',
  color:{r:255,g:255,b:0},
  icon:ej.pdf.PdfPopupIcon.comment,
  open:true,
  state:ej.pdf.PdfAnnotationState.accepted,
  stateModel:ej.pdf.PdfAnnotationStateModel.review
});
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

File Attachment Annotation

This example demonstrates how to add a file attachment annotation to a PDF page using the PdfAttachmentAnnotation class. A file attachment annotation allows embedding external files within a PDF document, enabling users to include supporting documents or resources for easy access.

import {PdfDocument, PdfPage, PdfAttachmentAnnotation, PdfAttachmentIcon, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create a new attachment annotation
let annotation: PdfAttachmentAnnotation = new PdfAttachmentAnnotation(
      { x: 300, y: 200, width: 30, height: 30 },
      'Nature.jpg',
       imageData,
       { text: 'Attachment', icon: PdfAttachmentIcon.pushPin, color: { r: 255, g: 0, b: 0 }, opacity: 1,
        border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })}
    );
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create a new attachment annotation
var annotation = new ej.pdf.PdfAttachmentAnnotation(
  {x:300,y:200,width:30,height:30},
  'Nature.jpg',
  imageData,
  {
    text:'Attachment',
    icon:ej.pdf.PdfAttachmentIcon.pushPin,
    color:{r:255,g:0,b:0},
    opacity:1,
    border:new ej.pdf.PdfAnnotationBorder({width:1,hRadius:0,vRadius:0,style:ej.pdf.PdfBorderStyle.solid})
  }
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

URI Annotation

This example demonstrates how to add a URI annotation to a PDF page using the PdfUriAnnotation class. A URI annotation allows linking to a web address or online resource from within a PDF document.

import {PdfDocument, PdfPage, PdfUriAnnotation} from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create a new URI annotation
let annotation: PdfUriAnnotation = new PdfUriAnnotation({ x: 100, y: 150, width: 200, height: 100 }, 'http://www.google.com');
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create a new URI annotation
var annotation = new ej.pdf.PdfUriAnnotation({x:100,y:150,width:200,height:100},'http://www.google.com');
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

This example demonstrates how to add a document link annotation to a PDF page using the PdfDocumentLinkAnnotation class. A document link annotation allows creating clickable links that navigate to a specific page or location within the same PDF document.

PdfDestination is constructed with a PdfPage, a position ({ x, y }), and a PdfDestinationMode enum value such as fitToPage, fitToR, fitToH, or location.

import {PdfDocument, PdfPage, PdfDocumentLinkAnnotation, PdfDestination, PdfAnnotationBorder, PdfDestinationMode, PdfBorderStyle} from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create new document link annotation
let annotation: PdfDocumentLinkAnnotation = new PdfDocumentLinkAnnotation(
      { x: 80, y: 100, width: 120, height: 18 },
      new PdfDestination(page: page, { x: 0, y: 0 }, {mode: PdfDestinationMode.fitToPage}),
      {
        color: { r: 0, g: 128, b: 0 }, opacity: 1,
        border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
      });
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create new document link annotation
var annotation = new ej.pdf.PdfDocumentLinkAnnotation(
  {x:80,y:100,width:120,height:18},
  new ej.pdf.PdfDestination(page: page, {x:0, y:0}, {mode:ej.pdf.PdfDestinationMode.fitToPage}),
  {color:{r:0,g:128,b:0},opacity:1,border:new ej.pdf.PdfAnnotationBorder({width:1,hRadius:0,vRadius:0,style:ej.pdf.PdfBorderStyle.solid})}
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Redaction Annotation

This example demonstrates how to add a redaction annotation to a PDF page using the PdfRedactionAnnotation class. A redaction annotation allows marking areas of a PDF for permanent removal of sensitive content, ensuring confidentiality and compliance with privacy requirements.

import {PdfDocument, PdfPage, PdfRedactionAnnotation, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create a new redaction annotation
let annotation: PdfRedactionAnnotation = new PdfRedactionAnnotation({ x: 100, y: 100, width: 100, height: 100 },
        {
          borderColor: { r: 255, g: 0, b: 0 },
          repeatText: true,
          overlayText: 'Sample Overlay',
          font: document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular),
          textColor: { r: 0, g: 0, b: 0 }
        });
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create a new redaction annotation
var annotation = new ej.pdf.PdfRedactionAnnotation(
  { x: 100, y: 100, width: 100, height: 100 },
  {
    borderColor: { r: 255, g: 0, b: 0 },
    repeatText: true,
    overlayText: 'Sample Overlay',
    font: document.embedFont(ej.pdf.PdfFontFamily.helvetica, 10, ej.pdf.PdfFontStyle.regular),
    textColor: { r: 0, g: 0, b: 0 }
  }
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Watermark Annotation

This example demonstrates how to add a watermark annotation to a PDF page using the PdfWatermarkAnnotation class. A watermark annotation allows overlaying text or images on a PDF page, typically used for branding, confidentiality notices, or document status indicators.

import {PdfDocument, PdfPage, PdfWatermarkAnnotation} from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create a new water mark annotation
let annotation: PdfWatermarkAnnotation = new PdfWatermarkAnnotation('Water Mark', { x: 50, y: 100, width: 100, height: 50 });
// Set the color of the annotation
annotation.color = { r: 0, g: 0, b: 0 };
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create a new watermark annotation
var annotation = new ej.pdf.PdfWatermarkAnnotation('Water Mark', { x: 50, y: 100, width: 100, height: 50 });
// Set the color of the annotation
annotation.color = { r: 0, g: 0, b: 0 };
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Text Markup Annotation

This example demonstrates how to add a text markup annotation to a PDF page using the PdfTextMarkupAnnotation class. A text markup annotation allows highlighting, underlining, or striking out text within a PDF document.

import {PdfDocument, PdfPage, PdfTextMarkupAnnotation, PdfTextMarkupAnnotationType, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create a new text markup annotation
let annotation: PdfTextMarkupAnnotation = new PdfTextMarkupAnnotation('Water Mark', {x: 0, y: 0, width: 0, height: 0}, {
       boundsCollection: [{ x: 50, y: 200, width: 120, height: 14}, { x: 50, y: 215, width: 90, height: 14}],
       textMarkupType: PdfTextMarkupAnnotationType.underline, author: 'Syncfusion', subject: 'Annotation',
       textMarkUpColor: { r: 0, g: 128, b: 255}, innerColor: { r: 0, g: 0, b: 255}, opacity: 0.5,
       border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
     });
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create a new text markup annotation
var annotation = new ej.pdf.PdfTextMarkupAnnotation(
  'Water Mark',
  { x: 0, y: 0, width: 0, height: 0 },
  {
    boundsCollection: [
      { x: 50, y: 200, width: 120, height: 14 },
      { x: 50, y: 215, width: 90, height: 14 }
    ],
    textMarkupType: ej.pdf.PdfTextMarkupAnnotationType.underline,
    author: 'Syncfusion',
    subject: 'Annotation',
    textMarkUpColor: { r: 0, g: 128, b: 255 },
    innerColor: { r: 0, g: 0, b: 255 },
    opacity: 0.5,
    border: new ej.pdf.PdfAnnotationBorder({
      width: 1,
      hRadius: 0,
      vRadius: 0,
      style: ej.pdf.PdfBorderStyle.solid
    })
  }
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Rectangle Annotation

This example demonstrates how to add a rectangle annotation to a PDF page using the PdfRectangleAnnotation class. A rectangle annotation allows drawing rectangular shapes on a PDF document.

import {PdfDocument, PdfPage, PdfRectangleAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create a new rectangle annotation with bounds
let annotation: PdfRectangleAnnotation = new PdfRectangleAnnotation({ x: 50, y: 80, width: 200, height: 100 }, {
       text: 'Rect', author: 'Syncfusion', subject: 'Rectangle Annotation',
       color: { r: 255, g: 0, b: 0 },
       innerColor: { r: 255, g: 240, b: 240 },
       opacity: 0.6,
       border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
    });
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create a new rectangle annotation with bounds
var annotation = new ej.pdf.PdfRectangleAnnotation(
  { x: 50, y: 80, width: 200, height: 100 },
  {
    text: 'Rect',
    author: 'Syncfusion',
    subject: 'Rectangle Annotation',
    color: { r: 255, g: 0, b: 0 },
    innerColor: { r: 255, g: 240, b: 240 },
    opacity: 0.6,
    border: new ej.pdf.PdfAnnotationBorder({
      width: 1,
      hRadius: 0,
      vRadius: 0,
      style: ej.pdf.PdfBorderStyle.solid
    })
  }
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Polygon Annotation

This example demonstrates how to add a polygon annotation to a PDF page using the PdfPolygonAnnotation class. A polygon annotation allows drawing multi-sided shapes on a PDF document.

import {PdfDocument, PdfPage, PdfPolygonAnnotation, PdfAnnotationBorder, PdfBorderStyle } from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create a new polygon annotation with bounds
let annotation: PdfPolygonAnnotation = new PdfPolygonAnnotation(
       [{ x: 100, y: 300 }, { x: 150, y: 200 }, { x: 300, y: 200 }, { x: 350, y: 300 }, { x: 300, y: 400 }, { x: 150, y: 400 }],
       {
         text: 'Polygon', author: 'Syncfusion', subject: 'Polygon Annotation',
         color: { r: 0, g: 128, b: 255 },
         innerColor: { r: 220, g: 240, b: 255 },
         opacity: 0.7,
         border: new PdfAnnotationBorder({ width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
       });
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create a new polygon annotation with bounds
var annotation = new ej.pdf.PdfPolygonAnnotation(
  [
    { x: 100, y: 300 },
    { x: 150, y: 200 },
    { x: 300, y: 200 },
    { x: 350, y: 300 },
    { x: 300, y: 400 },
    { x: 150, y: 400 }
  ],
  {
    text: 'Polygon',
    author: 'Syncfusion',
    subject: 'Polygon Annotation',
    color: { r: 0, g: 128, b: 255 },
    innerColor: { r: 220, g: 240, b: 255 },
    opacity: 0.7,
    border: new ej.pdf.PdfAnnotationBorder({
      width: 2,
      hRadius: 0,
      vRadius: 0,
      style: ej.pdf.PdfBorderStyle.solid
    })
  }
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Circle Annotation

This example demonstrates how to add a circle annotation to a PDF page using the PdfCircleAnnotation class. A circle annotation allows drawing circular or oval shapes on a PDF document.

import {PdfDocument, PdfPage, PdfCircleAnnotation, PdfAnnotationBorder, PdfBorderStyle, PdfMeasurementUnit, PdfCircleMeasurementType} from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create a new circle annotation with circle bounds
let annotation: PdfCircleAnnotation = new PdfCircleAnnotation({ x: 50, y: 100, width: 120, height: 120 }, {
       text: 'Diameter',
       author: 'Syncfusion',
       color: { r: 255, g: 0, b: 0 },
       innerColor: { r: 255, g: 255, b: 200 },
       opacity: 0.9,
       border: new PdfAnnotationBorder({ width: 2, hRadius: 0, vRadius: 0, style: PdfBorderStyle.dashed, dash: [3, 2] }),
       measure: { unit: PdfMeasurementUnit.centimeter, type: PdfCircleMeasurementType.diameter }
});
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create a new circle annotation with circle bounds
var annotation = new ej.pdf.PdfCircleAnnotation(
  { x: 50, y: 100, width: 120, height: 120 },
  {
    text: 'Diameter',
    author: 'Syncfusion',
    color: { r: 255, g: 0, b: 0 },
    innerColor: { r: 255, g: 255, b: 200 },
    opacity: 0.9,
    border: new ej.pdf.PdfAnnotationBorder({
      width: 2,
      hRadius: 0,
      vRadius: 0,
      style: ej.pdf.PdfBorderStyle.dashed,
      dash: [3, 2]
    }),
    measure: { unit: ej.pdf.PdfMeasurementUnit.centimeter, type: ej.pdf.PdfCircleMeasurementType.diameter }
  }
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Ellipse Annotation

This example demonstrates how to add an ellipse annotation to a PDF page using the PdfEllipseAnnotation class. An ellipse annotation allows drawing elliptical shapes on a PDF document.

import {PdfDocument, PdfPage, PdfEllipseAnnotation, PdfAnnotationBorder, PdfBorderStyle} from '@syncfusion/ej2-pdf';

// Create a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Create a new ellipse annotation with bounds
let annotation: PdfEllipseAnnotation = new PdfEllipseAnnotation({ x: 80, y: 120, width: 160, height: 100 }, {
       text: 'Ellipse', author: 'Syncfusion', subject: 'Ellipse Annotation',
       color: { r: 0, g: 128, b: 255 },
       innerColor: { r: 220, g: 240, b: 255 },
       opacity: 0.7,
       border: new PdfAnnotationBorder({ width: 1, hRadius: 0, vRadius: 0, style: PdfBorderStyle.solid })
    });
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Create a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Create a new ellipse annotation with bounds
var annotation = new ej.pdf.PdfEllipseAnnotation(
  { x: 80, y: 120, width: 160, height: 100 },
  {
    text: 'Ellipse',
    author: 'Syncfusion',
    subject: 'Ellipse Annotation',
    color: { r: 0, g: 128, b: 255 },
    innerColor: { r: 220, g: 240, b: 255 },
    opacity: 0.7,
    border: new ej.pdf.PdfAnnotationBorder({
      width: 1,
      hRadius: 0,
      vRadius: 0,
      style: ej.pdf.PdfBorderStyle.solid
    })
  }
);
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Custom appearance in stamp annotation

This example demonstrates how to embed a custom image as the appearance of a rubber stamp annotation.

import {PdfDocument, PdfPage, PdfRubberStampAnnotation, PdfImage, PdfBitmap} from '@syncfusion/ej2-pdf';

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// Get the first page
let page: PdfPage = document.getPage(0) as PdfPage;
// Create an image object from the byte array
let image: PdfImage = new PdfBitmap(imageBytes);
// Create a new rubber stamp annotation
let annotation: PdfRubberStampAnnotation = new PdfRubberStampAnnotation({x: 50, y: 100, width: 100, height: 50});
// Access the normal template of the appearance and draw the image
annotation.appearance.normal.graphics.drawImage(image, {x: 0, y: 0, width: 100, height: 50});
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Get the first page
var page = document.getPage(0);
// Create an image object from the byte array
var image = new ej.pdf.PdfBitmap(imageBytes);
// Create a new rubber stamp annotation
var annotation = new ej.pdf.PdfRubberStampAnnotation({x: 50, y: 100, width: 100, height: 50});
// Access the normal template of the appearance and draw the image
annotation.appearance.normal.graphics.drawImage(image, {x: 0, y: 0, width: 100, height: 50});
// Add annotation to the page
page.annotations.add(annotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Measurement Annotations

Measurement annotations display dimensions for distances, areas, radii, and angles directly on a PDF page.

Common types of measurement annotations include:

  • Line - Represents a straight distance between two points.(distance)
  • Circle - Used to measure circular dimensions.(Radius)
  • Square - Defines rectangular or square measurements.(Area)
  • Angle - Displays angular measurements between two intersecting lines.(degrees)

Adding Measurement Annotations

The example below adds a line measurement annotation using the PdfLineAnnotation class.

import {PdfDocument, PdfPage, PdfLineAnnotation, PdfAnnotationLineEndingStyle, PdfLineEndingStyle, PdfAnnotationCaption, PdfLineCaptionType, PdfMeasurementUnit} from '@syncfusion/ej2-pdf';

// Creates a new PDF document
let document: PdfDocument = new PdfDocument();
// Adds a new page to the PDF
let page: PdfPage = document.addPage();
// Creates a new line annotation.
let lineAnnotation: PdfLineAnnotation = new PdfLineAnnotation({ x: 80, y: 420 }, { x: 150, y: 420 }, {
    text: 'Line Annotation',
    author: 'Syncfusion',
    color: { r: 255, g: 0, b: 0 },
    innerColor: { r: 255, g: 255, b: 0 },
    lineEndingStyle: new PdfAnnotationLineEndingStyle({ begin: PdfLineEndingStyle.circle, end: PdfLineEndingStyle.diamond }),
    opacity: 0.5,
    measurementUnit: PdfMeasurementUnit.centimeter
});
// Assigns the line caption type
lineAnnotation.caption = new PdfAnnotationCaption({ cap: true, type: PdfLineCaptionType.inline });
// Adds annotation to the page
page.annotations.add(lineAnnotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Creates a new PDF document
var document = new ej.pdf.PdfDocument();
// Adds a new page to the PDF
var page = document.addPage();
// Creates a new line annotation.
var lineAnnotation = new ej.pdf.PdfLineAnnotation({x:80,y:420},{x:150,y:420},{
text:'Line Annotation',
author:'Syncfusion',
color:{r:255,g:0,b:0},
innerColor:{r:255,g:255,b:0},
lineEndingStyle:new ej.pdf.PdfAnnotationLineEndingStyle({begin:ej.pdf.PdfLineEndingStyle.circle,end:ej.pdf.PdfLineEndingStyle.diamond}),
opacity:0.5,
measurementUnit: ej.pdf.PdfMeasurementUnit.centimeter
});
// Assigns the line caption type
lineAnnotation.caption = new ej.pdf.PdfAnnotationCaption({cap:true,type:ej.pdf.PdfLineCaptionType.inline});
// Adds annotation to the page
page.annotations.add(lineAnnotation);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Modifying Measurement Annotations

The following code snippet explains how to modify a measurement annotation in an existing PDF document.

import {PdfDocument, PdfPage, PdfLineAnnotation, PdfMeasurementUnit} from '@syncfusion/ej2-pdf';

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Access the annotation at index 0
let annotation: PdfLineAnnotation = page.annotations.at(0) as PdfLineAnnotation;
// Sets the measurement unit of line measurement annotation as centimeter
annotation.unit = PdfMeasurementUnit.centimeter;
// Sets the flag to have measurement dictionary of the line annotation.
annotation.measure = true;
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access the annotation at index 0
var annotation = page.annotations.at(0);
// Sets the measurement unit of line measurement annotation as centimeter
if (annotation instanceof ej.pdf.PdfLineAnnotation) {
  annotation.unit = ej.pdf.PdfMeasurementUnit.centimeter;
  annotation.measure = true;
}
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Modifying Annotations

This example demonstrates how to modify an existing annotation in a PDF page using the PdfAnnotation class. Modifying annotations allows updating properties such as position, color, content, or appearance, enabling customization and refinement of the document’s interactive elements.

import {PdfDocument, PdfPage, PdfPopupAnnotation} from '@syncfusion/ej2-pdf';

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Get the first annotation of the page
let annotation: PdfPopupAnnotation = page.annotations.at(0) as PdfPopupAnnotation;
// Modified its properties
annotation.text = 'Popup annotation';
annotation.color = { r: 0, g: 128, b: 255};
annotation.opacity = 0.5;
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Get the first annotation of the page
var annotation = page.annotations.at(0);
// Modify its properties (only if it's a Popup annotation)
if (annotation instanceof ej.pdf.PdfPopupAnnotation) {
  annotation.text = 'Popup annotation';
  annotation.color = { r: 0, g: 128, b: 255 };
  annotation.opacity = 0.5;
}
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

Removing Annotations

This example demonstrates how to remove an annotation from a PDF page using the PdfAnnotationCollection class. Removing annotations allows deleting comments, shapes, or other interactive elements from a PDF document.

import {PdfDocument, PdfPage, PdfAnnotation} from '@syncfusion/ej2-pdf';

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// Access the first page
let page: PdfPage = document.getPage(0);
// Access first annotation from the PDF page
let annotation: PdfAnnotation = page.annotations.at(0);
// Remove an annotation from the collection
page.annotations.remove(annotation);
// Remove an annotation with specific index
page.annotations.removeAt(1);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();
// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Access the first page
var page = document.getPage(0);
// Access first annotation from the PDF page
var annotation = page.annotations.at(0);
// Remove an annotation from the collection
page.annotations.remove(annotation);
// Remove an annotation with specific index
page.annotations.removeAt(1);
// Save the document
document.save('output.pdf');
// Destroy the document
document.destroy();

After remove(annotation) runs, the indices of subsequent annotations shift by one. Recompute the index passed to removeAt() if the collection was modified.

Flattening Annotations

This example demonstrates how to flatten annotations in a PDF document using the PdfAnnotation class. Flattening annotations converts interactive elements such as comments, highlights, and shapes into static content.

import {PdfDocument, PdfLineAnnotation} from '@syncfusion/ej2-pdf';

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// Get the first page
let page: PdfPage = document.getPage(0) as PdfPage;
// Get the first annotation of the page
let annotation: PdfLineAnnotation = page.annotations.at(0) as PdfLineAnnotation;
// Sets the boolean flag indicating whether the annotation have been flattened or not.
annotation.flatten = true;
// Destroy the document
document.destroy();
// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Get the first page
var page = document.getPage(0);
// Get the first annotation of the page
var annotation = page.annotations.at(0);
// Sets the boolean flag indicating whether the annotation has been flattened
if (annotation instanceof ej.pdf.PdfLineAnnotation) {
  annotation.flatten = true;
}
// Destroy the document
document.destroy();

NOTE

Setting document.flatten = true; flattens all interactive elements in the PDF, converting form fields and annotations into static content throughout the entire document and this action is irreversible.

Importing Annotations

This example demonstrates how to import annotations into a PDF document using the importAnnotations method. The DataFormat enum specifies the format of the annotation data being imported, such as FDF, XFDF and JSON.

import {PdfDocument, DataFormat} from '@syncfusion/ej2-pdf';

// Load the base PDF document from resources
let document: PdfDocument = new PdfDocument(data);
// Imports annotations from to the PDF document.
document.importAnnotations(jsonData, DataFormat.json);
// Save the PDF document
document.save('output.pdf');
// Close the document
document.destroy();
// Load the base PDF document from resources
var document = new ej.pdf.PdfDocument(data);
// Import annotations into the PDF document
document.importAnnotations(jsonData, ej.pdf.DataFormat.json);
// Save the PDF document
document.save('output.pdf');
// Close the document
document.destroy();

Supported Data Formats

Format File Extension Strength Use Case
FDF .fdf Compact, Adobe-native Acrobat interop
XFDF .xfdf XML-based, portable Cross-platform annotation data
JSON .json Human-readable, web-friendly Web app storage

Exporting Annotations

This example demonstrates how to export annotations from a PDF document using the exportAnnotations method. The DataFormat enum specifies the format of the annotation data being exported, such as FDF, XFDF, JSON.

import {PdfDocument, PdfAnnotationExportSettings, DataFormat} from '@syncfusion/ej2-pdf';

// Load an existing PDF document
let document: PdfDocument = new PdfDocument(data);
// Sets export data format as JSON for annotation export settings
let settings: PdfAnnotationExportSettings = new PdfAnnotationExportSettings();
settings.dataFormat = DataFormat.json;
// Export annotations to JSON format
document.exportAnnotations('annotations.json', settings);
// Destroy the document
document.destroy();
// Load an existing PDF document
var document = new ej.pdf.PdfDocument(data);
// Sets export data format as JSON for annotation export settings
var settings = new ej.pdf.PdfAnnotationExportSettings();
settings.dataFormat = ej.pdf.DataFormat.json;
// Export annotations to JSON format
document.exportAnnotations('annotations.json', settings);
// Destroy the document
document.destroy();

Additional Resources