Text Annotation

A text annotation represents a sticky note attached to a location in a PDF document. When closed, the annotation appears as an icon. When opened, it displays a pop‑up window containing the note text. The appearance and font of the text are determined by the PDF viewer application.

Use the TextAnnotation class to add text annotations to a page.

Note: The examples on this page use helper functions from the Snippet Helpers module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API.

const doc = new PdfDocument();
const page = doc.newPage();
const rc = { x: 50, y: 50, width: 200, height: 50 };
const layout = new Layout({
    runs: [
        {
            text: "A red text annotation initially open is placed to the right of this note.",
            font: Font.getPdfFont(StandardPdfFont.Times),
            fontSize: 11
        }],
    maxWidth: rc.width,
    maxHeight: rc.height
});
page.context.drawLayout(layout, rc.x, rc.y);

//Create an instance of TextAnnotation class and set its relevant properties
var textAnnot = new TextAnnotation();
textAnnot.userName = "Jamie Smith";
textAnnot.Contents = "This is a text annotation in red color.";
textAnnot.rect = { x: rc.x + rc.width, y: rc.y, width: 0, height: 0 };
textAnnot.color = "Red";
textAnnot.open = true;

page.annotations.add(textAnnot); //Add the text annotation
const docData = doc.savePdf();
Util.saveFile("TextAnnotation.pdf", docData);