{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "pdf-viewer-annotations",
  "framework": "vue",
  "type": "registry:component",
  "component": "PdfViewer",
  "variant": "annotations",
  "dependencies": [
    "@syncfusion/ej2-vue-pdfviewer"
  ],
  "description": "PDF viewer pre-populated with highlight and underline annotations on page one.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/pdf-viewer-annotations.md"
  },
  "files": [
    {
      "target": "src/components/pdf-viewer-annotations/PdfViewer.vue",
      "content": "<template>\n    <div>\n        <div class=\"control-section\">\n            <ejs-pdfviewer \n                id=\"pdfviewer\" \n                ref=\"pdfviewer\" \n                :documentLoad=\"documentLoad\" \n                :documentPath=\"documentPath\"\n                :resourceUrl=\"resourceUrl\">\n            </ejs-pdfviewer>\n        </div>\n\n    </div>\n</template>\n<script>\nimport { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer, DisplayMode } from \"@syncfusion/ej2-vue-pdfviewer\";\n\nvar viewer;\nexport default {\n    components: {\n        'ejs-pdfviewer': PdfViewerComponent\n    },\n    data: function () {\n        return {\n            documentPath: 'https://cdn.syncfusion.com/content/pdf/annotations-v2.pdf',\n            resourceUrl: 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib'\n        }\n    },\n    provide: {\n        PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]\n    },\n    methods: {\n        documentLoad: function (args) {\n            viewer = this.$refs.pdfviewer.ej2Instances;\n            if (args.documentName === 'annotations-v2.pdf') {\n                viewer.annotation.addAnnotation(\"Highlight\", {\n                    bounds: [{ x: 97, y: 610, width: 340, height: 14 }],\n                    pageNumber: 1\n                });\n                viewer.annotation.addAnnotation(\"Underline\", {\n                    bounds: [{ x: 97, y: 705, width: 346, height: 14 }],\n                    pageNumber: 1\n                });\n                viewer.annotation.addAnnotation(\"Strikethrough\", {\n                    bounds: [{ x: 97, y: 800, width: 367, height: 14 }],\n                    pageNumber: 1\n                });\n                viewer.annotation.addAnnotation(\"Squiggly\", {\n                    bounds: [{x: 97, y: 895.5, width: 336, height: 14 }],\n                    pageNumber: 1\n                });\n                viewer.annotation.addAnnotation(\"Line\", {\n                    offset: { x: 200, y: 230 },\n                    pageNumber: 2,\n                    vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]\n                });\n                viewer.annotation.addAnnotation(\"Arrow\", {\n                    offset: { x: 200, y: 370 },\n                    pageNumber: 2,\n                    vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }]\n                });\n                viewer.annotation.addAnnotation(\"Rectangle\", {\n                    offset: { x: 200, y: 480 },\n                    pageNumber: 2,\n                    width: 150,\n                    height: 75\n                });\n                viewer.annotation.addAnnotation(\"Circle\", {\n                    offset: { x: 200, y: 620 },\n                    pageNumber: 2,\n                    width: 90,\n                    height: 90\n                });\n                viewer.annotation.addAnnotation(\"Polygon\", {\n                    offset: { x: 200, y: 800 },\n                    pageNumber: 2,\n                    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 }]\n                });\n                viewer.annotation.addAnnotation(\"Distance\", {\n                    offset: { x: 200, y: 230 },\n                    pageNumber: 3,\n                    vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]\n                });\n                viewer.annotation.addAnnotation(\"Perimeter\", {\n                    offset: { x: 200, y: 350 },\n                    pageNumber: 3,\n                    vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }]\n                });\n                viewer.annotation.addAnnotation(\"Area\", {\n                    offset: { x: 200, y: 500 },\n                    pageNumber: 3,\n                    vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }]\n                });\n                viewer.annotation.addAnnotation(\"Radius\", {\n                    offset: { x: 200, y: 630 },\n                    pageNumber: 3,\n                    width: 90,\n                    height: 90\n                });\n                viewer.annotation.addAnnotation(\"Volume\", {\n                    offset: { x: 200, y: 810 },\n                    pageNumber: 3,\n                    vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }]\n                });\n                viewer.annotation.addAnnotation(\"FreeText\", {\n                    offset: { x: 250, y: 150 },\n                    fontSize: 16,\n                    fontFamily: \"Helvetica\",\n                    pageNumber: 4,\n                    width: 200,\n                    height: 40,\n                    isLock: false,\n                    defaultText: \"Syncfusion\"\n                });\n                viewer.annotation.addAnnotation(\"Stamp\", {\n                    offset: { x: 200, y: 240 },\n                    pageNumber: 4\n                }, \"Approved\");\n                viewer.annotation.addAnnotation(\"Stamp\", {\n                    offset: { x: 200, y: 350 },\n                    pageNumber: 4\n                }, null, \"SignHere\");\n                viewer.annotation.addAnnotation(\"Stamp\", {\n                    offset: { x: 200, y: 460 },\n                    pageNumber: 4\n                }, null, null, \"Confidential\");\n                //The customStampImageSource property contains the stamp image as a base64 string\n                viewer.annotation.addAnnotation(\"Stamp\", {\n                    offset: { x: 200, y: 530 },\n                    pageNumber: 4,\n                    customStamps: [\n                        {\n                            customStampName: \"Image\",\n                            customStampImageSource: \"<base64-image-content>\"\n                        }\n                    ]\n                }); \n                //The pathData property holds the value of the signature drawn\n            viewer.annotation.addAnnotation(\"HandWrittenSignature\", {\n                offset: { x: 220, y: 180 },\n                pageNumber: 5,\n                width: 150,\n                height: 60,\n                signatureItem: ['Signature'],\n                signatureDialogSettings: {\n                    displayMode: DisplayMode.Draw\n                },\n                canSave: true,\n                path: \"<base64-image-content>\"\n            });\n            viewer.annotation.addAnnotation(\"HandWrittenSignature\", {\n                offset: { x: 200, y: 310 },\n                width: 200,\n                height: 65,\n                pageNumber: 5,\n                signatureItem: ['Signature'],\n                signatureDialogSettings: {\n                    displayMode: DisplayMode.Text, hideSaveSignature: false\n                },\n                path: 'Syncfusion',\n                canSave: false,\n                fontFamily: \"Helvetica\",\n            });\n            //The pathData property holds the signature image as a base64 string \n            viewer.annotation.addAnnotation(\"HandWrittenSignature\", {\n                offset: { x: 200, y: 420 },\n                pageNumber: 5,\n                width: 200,\n                height: 80,\n                signatureItem: ['Signature'],\n                signatureDialogSettings: {\n                    displayMode: DisplayMode.Upload, hideSaveSignature: false\n                },\n                canSave: false,\n                path: \"<base64-image-content>\"\n            });\n            //The pathData property holds the value of the signature drawn\n            viewer.annotation.addAnnotation(\"Initial\", {\n                offset: { x: 220, y: 620 },\n                pageNumber: 5,\n                width: 150,\n                height: 60,\n                signatureItem: ['Initial'],\n                initialDialogSettings: {\n                    displayMode: DisplayMode.Draw\n                },\n                canSave: true,\n                path: \"<base64-image-content>\"\n            });\n            viewer.annotation.addAnnotation(\"Initial\", {\n                offset: { x: 200, y: 750 },\n                width: 200,\n                height: 65,\n                pageNumber: 5,\n                signatureItem: ['Initial'],\n                initialDialogSettings: {\n                    displayMode: DisplayMode.Text, hideSaveSignature: false\n                },\n                path: 'Syncfusion',\n                canSave: false,\n                fontFamily: \"Helvetica\",\n            });\n            //The pathData property holds the signature image as a base64 string \n            viewer.annotation.addAnnotation(\"Initial\", {\n                offset: { x: 200, y: 860 },\n                pageNumber: 5,\n                width: 200,\n                height: 80,\n                signatureItem: ['Initial'],\n                initialDialogSettings: {\n                    displayMode: DisplayMode.Upload, hideSaveSignature: false\n                },\n                canSave: false,\n                path: \"<base64-image-content>\"\n            });\n            //The pathData property holds the value of the signature drawn using the ink annotation\n            viewer.annotation.addAnnotation(\"Ink\", {\n                offset: { x: 250, y: 130 },\n                pageNumber: 6,\n                width: 200,\n                height: 60,\n                path: \"\"<base64-image-content>\"\n            });\n            viewer.annotation.addAnnotation(\"StickyNotes\", {\n                offset: { x: 300, y: 320 },\n                pageNumber: 6,\n                isLock: false\n            });\n            }\n        },\n    }\n};\n</script>"
    },
    {
      "target": "src/components/pdf-viewer-annotations/PdfViewerView.vue",
      "content": "<template>\n  <PDFViewer />\n</template>\n\n<script setup>\nimport PDFViewer from '../../components/PDFViewer.vue'\n</script>"
    }
  ]
}