Add Annotations to PDF ​

// Import the JS file of ComPDFKit Web 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');

    // Sample1: Create annotations
    CreateAnnots(docViewer);

    // Sample2: Delete Annotations
    DeleteAnnotations(docViewer);
  })
})

function CreateAnnots(docViewer) {
  CreateNoteAnnotation(docViewer);
  CreateLinkAnnotation(docViewer);
  CreateFreetextAnnotation(docViewer);
  CreateShapeAnnotation(docViewer);
  CreateMarkupAnnotation(docViewer);
  CreateInkAnnotation(docViewer);
  CreateStampAnnotation(docViewer);
}

// Create note annotation
function CreateNoteAnnotation(docViewer) {
  docViewer.addAnnotations({
    type: 'text',
    page: 1,
    textColor: '#FF0000',
    fontSize: 16,
    color: '#FF0000',
    fontName: 'Helvetica',
    transparency: 1,
    fillTransparency: 0,
    content: 'test',
    rect: '0,0,50,50'
  });
}

// Create link annotation
function CreateLinkAnnotation(docViewer) {
  // Add a hyperlink.
  docViewer.addAnnotations({
    type: "link",
    page: 1,
    rect: "92,441,167,470",
    url: "https://example.com"
  });

  // Add a intra-document link.
  docViewer.addAnnotations({
    type: "link",
    page: 1,
    rect: "92,441,167,470",
    destPage: "2"
  });
}

// Create freetext annotation
function CreateFreetextAnnotation(docViewer) {
  docViewer.addAnnotations({
    type: 'freetext',
    page: 1,
    textColor: '#000000',
    fontSize: 16,
    color: '#FF0000',
    fontName: 'Helvetica',
    transparency: 1,
    fillTransparency: 0,
    alignment: 0,
    content: 'test',
    rect: '0,0,50,50'
  });
}

// Create shape annotations
function CreateShapeAnnotation(docViewer) {
  docViewer.addAnnotations({
    type: 'square', // Types include square, circle, line.
    page: 1,
    lineWidth: 2,
    transparency: 0.8,
    borderColor: '#FF0000',
    rect: '0,0,100,50'
  });
}

// Create markup annotation
function CreateMarkupAnnotation(docViewer) {
  docViewer.addAnnotations({
    type: 'highlight',  // Types include highlight, underline, strikeout, squiggly.
    page: 1,
    transparency: 0.8,
    quadPoints: "316,385,559,385,316,303,559,303",
    rect: "316,303,559,385",
    borderColor: "#FF0000",
    content: "test",
  });
}

// Create ink annotation
function CreateInkAnnotation(docViewer) {
  docViewer.addAnnotations({
    type: 'ink',
    page: 1,
    lineWidth: 2,
    transparency: 0.8,
    borderColor: '#FF0000',
    inklist: '9.20,34.00;9.20,34.00;9.20,33.00;9.20,33.00;9.20,31.00;9.20,31.00;10.20,31.00;10.20,31.00;11.20,30.00;11.20,30.00;12.20,28.00;12.20,28.00;13.20,27.00;13.20,27.00;13.20,26.00;13.20,26.00;15.20,24.00;15.20,24.00;17.20,23.00;17.20,23.00;20.20,21.00;20.20,21.00;22.20,19.00;22.20,19.00;25.20,18.00;25.20,18.00;29.20,18.00;29.20,18.00;33.20,18.00;33.20,18.00;34.20,18.00;34.20,18.00;36.20,18.00//',
    rect: '9.20,18,36.20,34'
  });
}

// Create stamp annotation
function CreateStampAnnotation(docViewer) {
  // Standard stamp.
  docViewer.addAnnotations({
    type: "stamp",
    page: 1,
    rect: "205,379,435,431",
    stampType: "standard",
    standardStampType: "NotApproved"
  });

  // Text stamp.
  docViewer.addAnnotations({
    type: "stamp",
    page: 1,
    rect: "225,387,415,423",
    stampType: "text",
    textStampFirststring: "REVISED",
    textStampSecondstring: "28/07/2023 07:28:28",
    textStampColor: "1",
    textStampShape: "0"
  });
}

// Delete the first annotation
function DeleteAnnotations(docViewer) {
  const annotations = docViewer.getAnnotations();

  if (annotations[0]) {
    docViewer.delAnnotations(annotations[0]);
  } else {
    console.log('No annotation');
  }
}