ComPDFKit
Get TrialContact Sales
DemoFAQTechnical Support
Guides

Create & Edit 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');
})
})

Note ​

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
  }
})

Shapes ​

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 = async () => {
  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);