Annotations ​

In addition to its primary textual content, a PDF file can contain annotations that represent links, form elements, highlighting circles, textual notes, and so on. Each annotation is associated with a specific location on a page and may offer interactivity with the user. Annotations allow users to mark up and comment on PDFs without altering the original author's content.

ComPDFKit Web Viewer supports most annotation types defined in PDF Reference and provides APIs for annotation creation & Editing, importing/exporting, flattening, properties access and modification, appearance setting, and drawing.

Annotation Type ​

ComPDFKit Web Viewer supports annotation types below. All annotations we supported are standard annotations (as defined in the PDF Reference) that can be read and written by many apps, such as Adobe Acrobat.

• Note
• Link
• Free Text
• Shapes: Square, circle, line, and arrow
• Markup: Highlight, underline, strikeout, and squiggly
• Ink
• Stamp: Nearly 20 standard stamps and dynamic stamps

Create & Edit Annotations ​

ComPDFKit Web Viewer 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 bottom left corner of the page.

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

• Note

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

  javascript

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  

• Link

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  

• Free Text

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

  javascript

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  

• 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',
    page: 1,
    lineWidth: 2,
    transparency: 0.8,
    borderColor: '#FF0000',
    rect: '0,0,100,50'
  })
  
  // Circle
  docViewer.addAnnotations({
    type: 'circle',
    page: 1,
    lineWidth: 2,
    transparency: 0.8,
    borderColor: '#FF0000',
    rect: '0,0,100,50'
  })
  
  // Line
  docViewer.addAnnotations({
    type: 'line',
    page: 1,
    lineWidth: 2,
    transparency: 0.8,
    borderColor: '#FF0000',
    rect: '0,0,100,50',
    linePoints: '0,0,100,50'
  })

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  

• 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',  // 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",
  })

  1
  2
  3
  4
  5
  6
  7
  8
  9
  

• 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',
    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'
  })

  1
  2
  3
  4
  5
  6
  7
  8
  9
  

• 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
  docViewer.addAnnotations({
    type: "stamp",
    page: 1,
    rect: "205,379,435,431",
    stampType: "standard",
    standardStampType: "NotApproved"
  })
  
  // text
  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"
  })

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20