# pdf-viewer-annotations

> PDF viewer pre-populated with highlight and underline annotations on page one.

**Framework:** vue  **Component:** PdfViewer  **Variant:** annotations

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/vue/pdf-viewer-annotations.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-pdfviewer
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/pdf-viewer-annotations/PdfViewer.vue

```vue
<template>
    <div>
        <div class="control-section">
            <ejs-pdfviewer 
                id="pdfviewer" 
                ref="pdfviewer" 
                :documentLoad="documentLoad" 
                :documentPath="documentPath"
                :resourceUrl="resourceUrl">
            </ejs-pdfviewer>
        </div>

    </div>
</template>
<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer, DisplayMode } from "@syncfusion/ej2-vue-pdfviewer";

var viewer;
export default {
    components: {
        'ejs-pdfviewer': PdfViewerComponent
    },
    data: function () {
        return {
            documentPath: 'https://cdn.syncfusion.com/content/pdf/annotations-v2.pdf',
            resourceUrl: 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib'
        }
    },
    provide: {
        PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]
    },
    methods: {
        documentLoad: function (args) {
            viewer = this.$refs.pdfviewer.ej2Instances;
            if (args.documentName === 'annotations-v2.pdf') {
                viewer.annotation.addAnnotation("Highlight", {
                    bounds: [{ x: 97, y: 610, width: 340, height: 14 }],
                    pageNumber: 1
                });
                viewer.annotation.addAnnotation("Underline", {
                    bounds: [{ x: 97, y: 705, width: 346, height: 14 }],
                    pageNumber: 1
                });
                viewer.annotation.addAnnotation("Strikethrough", {
                    bounds: [{ x: 97, y: 800, width: 367, height: 14 }],
                    pageNumber: 1
                });
                viewer.annotation.addAnnotation("Squiggly", {
                    bounds: [{x: 97, y: 895.5, width: 336, height: 14 }],
                    pageNumber: 1
                });
                viewer.annotation.addAnnotation("Line", {
                    offset: { x: 200, y: 230 },
                    pageNumber: 2,
                    vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]
                });
                viewer.annotation.addAnnotation("Arrow", {
                    offset: { x: 200, y: 370 },
                    pageNumber: 2,
                    vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }]
                });
                viewer.annotation.addAnnotation("Rectangle", {
                    offset: { x: 200, y: 480 },
                    pageNumber: 2,
                    width: 150,
                    height: 75
                });
                viewer.annotation.addAnnotation("Circle", {
                    offset: { x: 200, y: 620 },
                    pageNumber: 2,
                    width: 90,
                    height: 90
                });
                viewer.annotation.addAnnotation("Polygon", {
                    offset: { x: 200, y: 800 },
                    pageNumber: 2,
                    vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }]
                });
                viewer.annotation.addAnnotation("Distance", {
                    offset: { x: 200, y: 230 },
                    pageNumber: 3,
                    vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]
                });
                viewer.annotation.addAnnotation("Perimeter", {
                    offset: { x: 200, y: 350 },
                    pageNumber: 3,
                    vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }]
                });
                viewer.annotation.addAnnotation("Area", {
                    offset: { x: 200, y: 500 },
                    pageNumber: 3,
                    vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }]
                });
                viewer.annotation.addAnnotation("Radius", {
                    offset: { x: 200, y: 630 },
                    pageNumber: 3,
                    width: 90,
                    height: 90
                });
                viewer.annotation.addAnnotation("Volume", {
                    offset: { x: 200, y: 810 },
                    pageNumber: 3,
                    vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }]
                });
                viewer.annotation.addAnnotation("FreeText", {
                    offset: { x: 250, y: 150 },
                    fontSize: 16,
                    fontFamily: "Helvetica",
                    pageNumber: 4,
                    width: 200,
                    height: 40,
                    isLock: false,
                    defaultText: "Syncfusion"
                });
                viewer.annotation.addAnnotation("Stamp", {
                    offset: { x: 200, y: 240 },
                    pageNumber: 4
                }, "Approved");
                viewer.annotation.addAnnotation("Stamp", {
                    offset: { x: 200, y: 350 },
                    pageNumber: 4
                }, null, "SignHere");
                viewer.annotation.addAnnotation("Stamp", {
                    offset: { x: 200, y: 460 },
                    pageNumber: 4
                }, null, null, "Confidential");
                //The customStampImageSource property contains the stamp image as a base64 string
                viewer.annotation.addAnnotation("Stamp", {
                    offset: { x: 200, y: 530 },
                    pageNumber: 4,
                    customStamps: [
                        {
                            customStampName: "Image",
                            customStampImageSource: "<base64-image-content>"
                        }
                    ]
                }); 
                //The pathData property holds the value of the signature drawn
            viewer.annotation.addAnnotation("HandWrittenSignature", {
                offset: { x: 220, y: 180 },
                pageNumber: 5,
                width: 150,
                height: 60,
                signatureItem: ['Signature'],
                signatureDialogSettings: {
                    displayMode: DisplayMode.Draw
                },
                canSave: true,
                path: "<base64-image-content>"
            });
            viewer.annotation.addAnnotation("HandWrittenSignature", {
                offset: { x: 200, y: 310 },
                width: 200,
                height: 65,
                pageNumber: 5,
                signatureItem: ['Signature'],
                signatureDialogSettings: {
                    displayMode: DisplayMode.Text, hideSaveSignature: false
                },
                path: 'Syncfusion',
                canSave: false,
                fontFamily: "Helvetica",
            });
            //The pathData property holds the signature image as a base64 string 
            viewer.annotation.addAnnotation("HandWrittenSignature", {
                offset: { x: 200, y: 420 },
                pageNumber: 5,
                width: 200,
                height: 80,
                signatureItem: ['Signature'],
                signatureDialogSettings: {
                    displayMode: DisplayMode.Upload, hideSaveSignature: false
                },
                canSave: false,
                path: "<base64-image-content>"
            });
            //The pathData property holds the value of the signature drawn
            viewer.annotation.addAnnotation("Initial", {
                offset: { x: 220, y: 620 },
                pageNumber: 5,
                width: 150,
                height: 60,
                signatureItem: ['Initial'],
                initialDialogSettings: {
                    displayMode: DisplayMode.Draw
                },
                canSave: true,
                path: "<base64-image-content>"
            });
            viewer.annotation.addAnnotation("Initial", {
                offset: { x: 200, y: 750 },
                width: 200,
                height: 65,
                pageNumber: 5,
                signatureItem: ['Initial'],
                initialDialogSettings: {
                    displayMode: DisplayMode.Text, hideSaveSignature: false
                },
                path: 'Syncfusion',
                canSave: false,
                fontFamily: "Helvetica",
            });
            //The pathData property holds the signature image as a base64 string 
            viewer.annotation.addAnnotation("Initial", {
                offset: { x: 200, y: 860 },
                pageNumber: 5,
                width: 200,
                height: 80,
                signatureItem: ['Initial'],
                initialDialogSettings: {
                    displayMode: DisplayMode.Upload, hideSaveSignature: false
                },
                canSave: false,
                path: "<base64-image-content>"
            });
            //The pathData property holds the value of the signature drawn using the ink annotation
            viewer.annotation.addAnnotation("Ink", {
                offset: { x: 250, y: 130 },
                pageNumber: 6,
                width: 200,
                height: 60,
                path: ""<base64-image-content>"
            });
            viewer.annotation.addAnnotation("StickyNotes", {
                offset: { x: 300, y: 320 },
                pageNumber: 6,
                isLock: false
            });
            }
        },
    }
};
</script>
```

### src/components/pdf-viewer-annotations/PdfViewerView.vue

```vue
<template>
  <PDFViewer />
</template>

<script setup>
import PDFViewer from '../../components/PDFViewer.vue'
</script>
```