Skip to content
On this page

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.

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