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.
javascriptdocViewer.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.
javascriptdocViewer.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.javascriptdocViewer.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.
javascriptdocViewer.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" })