ComPDFKit
Contact Sales
PDF SDKIDPConversion SDK
PDF SDK
DownloadFAQTechnical Support
Guides

Create Annotations ​

ComPDFKit for Web includes a wide variety of standard annotations, and each of them is added to the project in a similar way. Before creating annotations, you need to initialize a pdf document in your project.

Note: When adding an annotation, the coordinate origin is at the left top corner of the page.

javascript
// Import the JS file of ComPDFKit Demo.
import ComPDFKitViewer from "/@compdfkit/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
  .then((core) => {
    const docViewer = core.docViewer;
    docViewer.addEvent('documentloaded', () => {
      console.log('ComPDFKit Web Demo loaded');
    })
  });

Text ​

Add a sticky note (text annotation) to a PDF Document page by using the following method.

javascript
docViewer.addAnnotations({
  type: 'text',
  pageIndex: 1,
  color: '#FF0000',
  fontSize: 16,
  fontName: 'Helvetica',
  opacity: 1,
  contents: 'test',
  rect: {
    left: 100,
    top: 30,
    right: 124,
    bottom: 54
  }
});

To add a hyperlink or intra-document link annotation to a PDF Document page by using the following method.

javascript
// Add a hyperlink.
docViewer.addAnnotations({
  type: 'link',
  pageIndex: 0,
  rect: {
    left: 92,
    top: 200,
    right: 167,
    bottom: 230
  },
  url: 'https://example.com'
});

// Add a intra-document link.
docViewer.addAnnotations({
  type: 'link',
  pageIndex: 0,
  rect: {
    left: 92,
    top: 200,
    right: 167,
    bottom: 230
  },
  destPage: 2
});

Free Text ​

Add a free text annotation to a PDF Document page by using the following method.

javascript
docViewer.addAnnotations({
  type: 'freetext',
  pageIndex: 0,
  color: '#000000',
  fontSize: 16,
  fontName: 'Helvetica',
  opacity: 1,
  textAlignment: 'left',
  contents: 'test',
  rect: {
    left: 100,
    top: 200,
    right: 160,
    bottom: 240
  }
});

Graphics ​

Add a shape annotation like a rectangle, circle, line, or arrow to a PDF document page by using the following method.

javascript
// Square.
docViewer.addAnnotations({
  type: 'square',
  pageIndex: 0,
  borderWidth: 2,
  borderColor: '#FF0000',
  rect: {
    left: 0,
    top: 50,
    right: 100,
    bottom: 100
  }
});

// Circle.
docViewer.addAnnotations({
  type: 'circle',
  pageIndex: 0,
  borderWidth: 2,
  borderColor: '#FF0000',
  rect: {
    left: 0,
    top: 50,
    right: 100,
    bottom: 100
  }
});

// Line.
docViewer.addAnnotations({
  type: 'line',
  pageIndex: 0,
  borderWidth: 2,
  borderColor: '#FF0000',
  rect: {
    left: 0,
    top: 50,
    right: 100,
    bottom: 100
  },
  linePoints: [0, 50, 100, 100]
});

Markup ​

Add a highlight annotation to a PDF Document page by using the following method, and add other markup annotations in a similar way.

Note: The value of quadPoints are (left,top), (right,top), (left,bottom), and (right,bottom). The coordinate origin is at the bottom left corner of the page.

javascript
docViewer.addAnnotations({
  type: 'highlight',  // Types include highlight, underline, strikeout, squiggly.
  pageIndex: 0,
  opacity: 0.8,
  quadPoints: [
    { PointX: 116, PointY: 300 },
    { PointX: 360, PointY: 300 },
    { PointX: 116, PointY: 360 },
    { PointX: 360, PointY: 360 },
  ],
  rect: {
    left: 116,
    top: 300,
    right: 360,
    bottom: 360
  },
  color: '#FF0000',
  contents: 'test'
});

Ink ​

Ink is the annotation to draw freely on PDFs with kinds of colors. Follow the method below to obtain our ink annotation.

javascript
docViewer.addAnnotations({
  type: 'ink',
  pageIndex: 0,
  borderWidth: 2,
  opacity: 0.8,
  borderColor: '#FF0000',
  inkPointes: [[
    { PointX: 9.20, PointY: 34 },
    { PointX: 9.20, PointY: 34 },
    { PointX: 9.20, PointY: 33 },
    { PointX: 9.20, PointY: 31 },
    { PointX: 10.20, PointY: 31 },
    { PointX: 11.20, PointY: 30 },
    { PointX: 12.20, PointY: 28 },
    { PointX: 13.2, PointY: 27 },
    { PointX: 13.2, PointY: 26 },
    { PointX: 15.2, PointY: 24 },
    { PointX: 17.2, PointY: 23 },
    { PointX: 22.2, PointY: 19 }
  ]],
  rect: {
    left: 9.2,
    top: 19,
    right: 22.2,
    bottom: 34
  }
});

Stamp ​

Add standard and text stamps to a PDF document page by using the following method. Provide more than 20 standard stamps and dynamic time stamps.

javascript
// Standard stamp.
docViewer.addAnnotations({
  type: 'stamp',
  pageIndex: 0,
  rect: {
    left: 205,
    top: 379,
    right: 435,
    bottom: 431
  },
  stampType: 'standard',
  contents: 'NotApproved'
});

// Text stamp.
docViewer.addAnnotations({
  type: 'stamp',
  pageIndex: 0,
  rect: {
    left: 220,
    top: 367,
    right: 320,
    bottom: 412
  },
  stampType: 'text',
  contents: 'REVISED',
  time: '28/07/2023 07:28:28',
  stampColor: 1,
  stampShape: 0
});

// Create an image stamp.
const res = await fetch('https://example.com/image.png');
const imageBlob = await res.blob();
const reader = new FileReader();

reader.onloadend = () => {
  const imageBase64 = reader.result;
  
  docViewer.addAnnotations({
    type: 'stamp',
    stampType: 'image',
    pageIndex: 0,
    imageBase64,
    rect: {
      left: 220,
      top: 367,
      right: 320,
      bottom: 412
    }
  });
};

reader.readAsDataURL(imageBlob);