Syncfusion Vue Pdf Viewer

Syncfusion Vue Pdfviewer – UI Sample Generator

Target package: @syncfusion/ej2-vue-pdfviewer

Generate Code for the User's Project (default)

Trigger keywords: "how to", "add pdfviewer", "code sample", "show me", "example", "snippet", "integrate", "component", "create sample", "vue sample".

Purpose: Generate minimal, copy-pasteable Vue SFC (.vue) code that the user can integrate directly into their Vue 2 or Vue 3 project.

Workflow: ⚠️ CRITICAL — Feature Support Policy (STRICT MODE):

FUNDAMENTAL RULE: Only generate code using APIs and properties that are EXPLICITLY listed in the reference files. ANY deviation is a VIOLATION.

• MANDATORY CHECKS BEFORE GENERATING ANY CODE:

1. Search the reference files for the exact API/property name 2. Verify it appears in the Method Reference, Properties, or Events tables 3. If NOT found in ANY reference file, STOP immediately 4. Do NOT generate or suggest undocumented APIs under any circumstances

• STRICT ENFORCEMENT - ZERO TOLERANCE:
• NO custom properties - Only use properties from reference file tables
• NO invented methods - Only use methods from reference file tables
• NO workarounds with undefined APIs - Forbidden
• NO assumptions about undocumented behavior - Forbidden
• NO alternative implementations using guess-work - Forbidden
• NO pretending support exists - Forbidden

• MANDATORY RESPONSE FOR UNSUPPORTED FEATURES:
• If a requested scenario/feature/API is NOT listed in any reference file, you MUST respond with:

    "This feature is not supported in the current Syncfusion Vue PDF Viewer implementation."

• Then list what IS supported from the appropriate reference file
• Never suggest alternatives unless explicitly documented in reference files

• REFERENCE FILE HIERARCHY:
• Each reference file contains complete, authoritative documentation for its domain
• The tables (Method Reference, Properties, Events) are the SOURCE OF TRUTH
• Content outside these tables in reference files is explanatory only
• Do NOT extend beyond what appears in the reference file tables

• AUDIT YOUR GENERATION:
• Before providing any code, verify EVERY API used appears in a reference file table
• Document which reference file each API comes from
• If you cannot cite a reference file table entry, DELETE that code

• This is a CRITICAL REQUIREMENT. Violations compromise the skill's integrity and reliability.

Step 1 — Detect the Application Type (REQUIRED - DO NOT SKIP)

• Use file_search and read_file tools to inspect workspace project files:
• package.json (project configuration and dependencies)
• vite.config.js or vite.config.ts (Vue 3 Vite build config)
• vue.config.js (Vue 2 Vue-CLI config)
• App.vue (root component)
• main.js or main.ts (app entry point — check for Vue.use(...) for Vue 2 vs createApp(...) for Vue 3)
• Any existing .vue files in src/ folder
• Output: Confirm the detected application type is Vue 2 or Vue 3 before proceeding, as the component registration and API patterns differ.

Step 2 — Generate Code from Reference Files Only (REQUIRED)

• Before generating: Confirm that Step 1 is complete
• Read the relevant references/*.md file(s) for the requested feature
• Cross-reference EVERY API, property, and method against these tables
• COMPONENT-BASED APPROACH (MANDATORY - VUE PATTERNS ONLY):
• Use Vue SFC (.vue) syntax with <template>, <script>, and <style> sections
• Use <ejs-pdfviewer> as the component tag
• Bind all PDF Viewer properties using Vue's :prop="value" binding syntax
• Vue 2: Register component via components: { "ejs-pdfviewer": PdfViewerComponent } and inject services via provide: { PdfViewer: [...] }
• Vue 3 Composition API: Import PdfViewerComponent as EjsPdfviewer and use provide('PdfViewer', [...]) from vue
• Vue 3 Options API: Use components + provide options just like Vue 2 but with createApp entry
• Use ref / $refs (Vue 2) or ref() + template ref attribute (Vue 3) for programmatic viewer access
• MANDATORY: Before generating ANY code, verify that reference files exist and are accessible
• Read the appropriate reference file(s) for the requested feature:
• Use read_file tool on relevant references/*.md files
• Confirm file contains Methods/Properties/Events tables
• Verify tables are complete and readable
• If reference file is missing or cannot be read:
• STOP code generation
• Respond: "Reference file for this feature is not available. Please ensure all reference files are present in the references/ directory."
• List the missing reference file name
• This is a BLOCKER step: Cannot proceed without reference file validation
• If an API/property does NOT appear in the reference file table, DO NOT USE IT
• Do NOT invent, guess, or suggest any API, method, property, class, or namespace not explicitly present in the reference files

---

Reference File Routing

All templates and operation snippets live in references/*.md. Each file is a focused snippet or template the agent will combine when generating samples.

Flow: Always start with getting-started.md, then merge matched features into its anchors (PROPS, EVENTS, UI_BUTTONS, HANDLERS). If no keyword matches, return only the basic sample.

Checklist Before Generating Code

• [ ] Detected Vue version? Vue 2 → use data() + provide:{} | Vue 3 → use ref()/reactive() + provide()
• [ ] Count the settings properties: 1-3? → Use inline binding | 4+? → Use data constant
• [ ] Are enums involved? Yes → Import required enums | No → Skip enum imports
• [ ] Is it reused elsewhere? Yes → Use data/ref constant | No → Prefer inline
• [ ] Is the component prop simple enough? Yes → Keep inline | No → Extract to data/ref

🎯 Core Setup & Configuration

📐 Navigation & Page Management

🔍 Viewing & Interaction

🛠️ Toolbar & Context Menu

Toolbar Configuration

⚠️ STRICT VALIDATION FOR TOOLBAR ITEM NAMES

When generating toolbar configurations, you MUST follow these rules to prevent incorrect toolbar item names:

1. ALWAYS reference exact item names from `toolbar-settings.md`

• Do NOT invent, guess, or assume toolbar item names
• Do NOT apply naming pattern logic to derive names
• Use ONLY names listed in the "Available Primary Toolbar Items", "Available Annotation Toolbar Items", and "Available Form Designer Items" sections in toolbar-settings.md

2. VALIDATE item names character-by-character

• Case sensitivity matters: HighlightTool ≠ HighlightOption
• Exact names only: AnnotationEditTool ≠ AnotatetionEditTool
• No abbreviations or shortcuts

3. Before generating toolbar configuration code:

• [ ] Open toolbar-settings.md reference file
• [ ] Locate: "Available Primary Toolbar Items" section
• [ ] Locate: "Available Annotation Toolbar Items" section
• [ ] Locate: "Available Form Designer Items" section
• [ ] Copy exact names from THESE SECTIONS ONLY
• [ ] Cross-check every single item name character-by-character
• [ ] If ANY item name is not in the reference sections, DO NOT USE IT
• [ ] Consult the "❌ COMMON MISTAKES TO AVOID" table in toolbar-settings.md if unsure

4. Common errors to prevent:

• ❌ AnotatetionEditTool → ✅ AnnotationEditTool (typo)
• ❌ CalibrationOption → ✅ CalibrateTool (wrong suffix)
• ❌ ShapeAnnotationOption → ✅ ShapeTool (annotation toolbar version)
• ❌ InkAnnotationOption → ✅ InkAnnotationTool (annotation toolbar version)
• For complete list of mistakes to avoid, see toolbar-settings.md "❌ COMMON MISTAKES TO AVOID" table

Context Menu Customization

📝 Annotations

📄 Forms

📋 Document Actions

⚙️ Advanced Features

Quick Start Example

<template>
  <ejs-pdfviewer
    ref="pdfViewer"
    :resourceUrl="resourceUrl"
    :documentPath="documentPath"
    style="height: 640px">
  </ejs-pdfviewer>
</template>

<script setup>
import { provide } from 'vue';
import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
         BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
         Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer';

const resourceUrl = window.location.origin + "/asset/ej2-pdfviewer-lib";
const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

provide('PdfViewer', [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
                       Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields ]);
</script>

<style>
  /* Refer to the CSS Configuration section for the full import list */
  @import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
</style>

⚙️ SETTINGS CONFIGURATION BEST PRACTICES

When generating code with settings (toolbarSettings, annotationSettings, annotationSelectorSettings, arrowSettings, rectangleSettings, etc.), follow these guidelines to prevent unnecessary complexity:

Rule 1: Simple Settings → Define INLINE in Component Binding

Use this approach when:

• Configuring only 1-3 properties
• Settings are straightforward without complex enums or custom types
• No need for separate data constants

Example (DO THIS):

<template>
  <ejs-pdfviewer
    id="container"
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    :annotationSelectorSettings="{
      selectionBorderColor: '#0000ff',
      selectionBorderThickness: 2,
      resizerBorderColor: '#ff0000',
    }"
    style="height: 640px"
  />
</template>

Benefits:

• ✅ No extra data properties needed
• ✅ Simple and readable
• ✅ Less code clutter

---

Rule 2: Complex Settings → Define in data() / ref() (OUTSIDE template)

Use this approach when:

• Configuring 4+ properties OR multiple related settings
• Using enums or complex configurations
• Need to reuse the same configuration across multiple components

Example — Vue 2 Options API (DO THIS ONLY FOR COMPLEX CASES):

<template>
  <ejs-pdfviewer
    id="container"
    :documentPath="documentPath"
    :annotationSelectorSettings="annotationSelectorConfig"
    style="height: 640px"
  />
</template>

<script>
import { PdfViewerComponent, Annotation,
         AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: 'App',
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
      annotationSelectorConfig: {
        selectionBorderColor: '#0000ff',
        selectionBorderThickness: 2,
        resizerBorderColor: '#ff0000',
        resizerFillColor: '#4070ff',
        resizerSize: 8,
        resizerShape: 'Square',
        selectorLineDashArray: [5, 6],
        resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
        resizerCursorType: CursorType.grab,
      },
    };
  },
  provide: { PdfViewer: [Annotation] },
};
</script>

Example — Vue 3 Composition API (DO THIS ONLY FOR COMPLEX CASES):

<script setup>
import { provide } from 'vue';
import { PdfViewerComponent as EjsPdfviewer, Annotation,
         AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';

const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
const annotationSelectorConfig = {
  selectionBorderColor: '#0000ff',
  selectionBorderThickness: 2,
  resizerBorderColor: '#ff0000',
  resizerFillColor: '#4070ff',
  resizerSize: 8,
  resizerShape: 'Square',
  selectorLineDashArray: [5, 6],
  resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
  resizerCursorType: CursorType.grab,
};

provide('PdfViewer', [Annotation]);
</script>

When to import enums:

• [ ] Import any enums that are used in the settings (e.g., AnnotationResizerLocation, CursorType)
• [ ] Keep imports minimal — import ONLY what is used in the settings

Benefits:

• ✅ Proper enum usage
• ✅ Reusable across multiple components
• ✅ Clean template code

---

Rule 3: NEVER Over-Engineer Simple Cases

❌ DO NOT DO THIS (Over-engineered):

<script>
import { PdfViewerComponent } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  data() {
    return {
      // Unnecessary data property for 1 simple prop
      toolbarSettings: { showTooltip: true },
    };
  },
};
</script>

✅ DO THIS INSTEAD (Simple & Clean):

<ejs-pdfviewer :toolbarSettings="{ showTooltip: true }" ... />

---

Syncfusion Vue PDF Viewer — Skill

Overview

The syncfusion-vue-pdf-viewer skill enables AI-assisted code generation for the Syncfusion Vue PDF Viewer (`PdfViewerComponent`). It produces minimal, copy-pasteable Vue SFC snippets to embed, configure, and interact with PDF documents inside Vue applications.

---

Compatibility

---

Skill Structure

syncfusion-vue-pdf-viewer/
├── SKILL.md                      # Skill rules, routing, and code generation guidelines
├── README.md                     # This file
└── references/
		├── getting-sample.md         # Minimal setup & initialization template
		├── general-properties.md     # Core viewer properties (documentPath, height, locale, etc.)
		├── enable-properties.md      # Feature toggle properties (enableToolbar, enableAnnotation, etc.)
		├── toolbar-settings.md       # Toolbar visibility and item customization
		├── toolbar-methods.md        # Programmatic toolbar show/hide at runtime
		├── contextmenu.md            # Right-click context menu customization
		├── page-navigation.md        # Navigate between pages programmatically
		├── bookmark-navigation.md    # Bookmark panel and navigation
		├── thumbnail-navigation.md   # Thumbnail panel and page previews
		├── hyperlink-navigation.md   # Hyperlink and external link behavior
		├── magnification.md          # Zoom levels, zoom modes, fit-to-page/width
		├── interaction-mode.md       # Selection mode vs. panning mode
		├── text-selection.md         # Enable text select, copy, and selection events
		├── text-search.md            # Find text in PDF with search options
		├── annotation-settings.md    # Annotation appearance (colors, opacity, styles)
		├── annotation-events.md      # Annotation lifecycle events (add, delete, resize, etc.)
		├── shape-label-settings.md   # Shape/measure annotation label customization
		├── redaction-annotation.md   # Redaction: create, configure, and apply
		├── form-field-settings.md    # Form field default properties
		├── form-field-events.md      # Form field interaction events (focus, blur, change)
		├── download.md               # PDF download configuration
		├── print.md                  # PDF print configuration
		├── organize-pages.md         # Reorder, rotate, insert, remove, merge pages
		├── api-methods.md            # Programmatic API (load, export, undo/redo, extract text)
		└── events.md                 # Complete PDF Viewer event reference

---

Quick Start

1. Create a Vue Project

# TypeScript
npm create vite@latest my-app -- --template vue-ts
cd my-app

# JavaScript
npm create vite@latest my-app -- --template vue
cd my-app

2. Install the Package

npm install @syncfusion/ej2-vue-pdfviewer --save

3. Copy WebAssembly Resources

cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib public/ej2-pdfviewer-lib

4. Add CSS Imports (src/style.css)

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';

5. Basic Component (src/App.vue)

<template>
	<ejs-pdfviewer
		id="container"
		:documentPath="documentPath"
		:resourceUrl="resourceUrl"
		style="height: 640px"
	></ejs-pdfviewer>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import {
	PdfViewerComponent, Toolbar, Magnification, Navigation,
	LinkAnnotation, BookmarkView, ThumbnailView, Print,
	TextSelection, Annotation, TextSearch, FormFields, FormDesigner
} from '@syncfusion/ej2-vue-pdfviewer';

export default defineComponent({
	name: 'App',
	components: {
		'ejs-pdfviewer': PdfViewerComponent
	},
	data() {
		return {
			documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
			resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
		};
	},
	provide: {
		PdfViewer: [
			Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
			BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
			FormFields, FormDesigner
		]
	}
});
</script>

6. Run the App

npm run dev

---

Available Services

Inject only the services your use-case requires to keep the bundle lean.

---

Reference File Routing

Use the table below to find the correct reference file for any feature request.

Core Setup

Navigation

Viewing & Interaction

Toolbar & Context Menu

Annotations

Forms

Document Actions

Advanced / API

---

Metadata

Annotation Events

Description: Annotation events for the Syncfusion PDF Viewer (Vue) notify your app when annotations are created, changed, moved, resized, selected, or removed. Use these hooks to implement logging, validation, custom UI updates, or backend synchronization.

Table of Contents

• When to use
• Picking the right event
• Using events in Vue
• Events reference (complete list)
• Annotation object summary
• Common usage patterns

---

When to use

• Track user edits and build audit trails.
• Run business validation before allowing annotations.
• Update custom property panes, toolbars, or lists when selection changes.
• Sync annotation changes to a server or shared session.

Picking the right event

• Need to stop an action? Use a "before" event that supports cancellation (see beforeAddFreeText).
• Want the final state after a user finishes an action? Use the lifecycle events (e.g., annotationAdd, annotationMove, annotationRemove).
• Need real-time feedback while dragging/resizing? Use the in-progress events like annotationMoving.

---

Using events in Vue

Example: register handlers on the PDF Viewer component using Vue event listeners.

<template>
  <ejs-pdfviewer
    @annotationAdd="handleAnnotationAdd"
    @annotationSelect="handleAnnotationSelect"
    @annotationMove="handleAnnotationMove"
  />
</template>

<script setup>
import { ref } from 'vue'

const handleAnnotationAdd = (args) => { console.log('annotation added', args) }
const handleAnnotationSelect = (args) => { console.log('selected', args) }
const handleAnnotationMove = (args) => { console.log('moved', args) }
</script>

Use the handler args to access annotationId, pageIndex, and the full annotation object when provided.

---

Events reference (Vue)

The following events are supported. Each entry lists when it fires and the useful properties available on the event args object.

• annotationAdd — Fires after an annotation is added. Args: annotationId, pageIndex, annotation, annotationAddMode.
• annotationDoubleClick — Fires on double-clicking an annotation. Args: annotationId, pageIndex, annotation.
• annotationMouseLeave — Mouse left an annotation. Args: annotationId, pageIndex.
• annotationMouseover — Mouse entered an annotation. Args: annotationId, pageIndex, X, Y.
• annotationMove — Fires after an annotation move completes. Args: annotationId, pageIndex, annotation (updated).
• annotationMoving — Fires continuously while an annotation moves. Args: annotationId, pageIndex, currentPosition.
• annotationPropertiesChange — Annotation property changes. Args include annotationId, pageIndex, boolean flags such as isColorChanged, isThicknessChanged, isOpacityChanged, plus annotation.
• annotationRemove — Fires when an annotation is removed. Args: annotationId, pageIndex, annotation (removed object).
• annotationResize — Fires after resize completes. Args: annotationId, pageIndex, annotation (with new bounds).
• annotationSelect — Fires when annotation(s) are selected. Args: annotationId, pageIndex, annotation, annotationCollection, isMultiSelect.
• annotationUnSelect — Fires when an annotation is unselected. Args: annotationId, pageIndex.
• beforeAddFreeText — Fires before a free-text annotation is created; supports cancellation via args.cancel = true. Args: pageIndex, cancel.
• addSignature — Fired when a signature is added. Args: pageIndex, signature (object).
• removeSignature — Fired when a signature is deleted. Args: pageIndex, signature.
• resizeSignature — Fires after signature resize. Args: pageIndex, signature, previousPosition, currentPosition.
• signaturePropertiesChange — Signature property changes. Args: pageIndex, isThicknessChanged, isOpacityChanged, isStrokeColorChanged, signature.
• signatureSelect — Signature selected. Args: pageIndex, signature.
• signatureUnselect — Signature unselected. Args: pageIndex, signature.

Ensure your Vue handlers inspect the args object to determine the annotation type and the properties that are present.

---

Annotation object summary

When handlers expose an annotation object, it contains both general and type-specific properties. Not every property appears on every annotation type — check type/subType first.

Core properties you can expect (commonly available):

• annotationId / id / randomId — identifiers.
• author, creationDate, modifiedDate.
• pageNumber / pageIndex.
• type, subType, shapeAnnotationType.
• Visual properties: color, strokeColor, fillColor, opacity, thickness, isLocked, isPrint.
• Geometry: bounds (x,y,width,height,left,top,right), rect (left,top,right,bottom,height,width), vertexPoints for polygons.
• annotationAddMode, customData, comments, review.

Type-specific highlights

• Text markup (type: "TextMarkup"): textMarkupContent, textMarkupStartIndex, textMarkupEndIndex.
• FreeText: content, dynamicText, fontFamily, textAlign, font object.
• Ink: data (path/SVG data).
• Shape/Measure: caption, captionPosition, labelContent, labelBounds, calibrate.
• Stamp: icon, customStampName, isDynamicStamp, stampAnnotationPath.

Nested objects you will commonly access

• Rect: { left, top, right, bottom, width, height }.
• Bounds: { x, y, left, top, right, width, height }.
• Review: { state, stateModel, author, modifiedDate }.
• AnnotationSettings: { isLock, isPrint, maxHeight, maxWidth, minHeight, minWidth }.
• AnnotationSelectorSettings: selection handle and border styling.
• LabelSettings: label borderColor, fillColor, fontColor, fontSize, opacity.

---

Common usage patterns (Vue examples)

1) Audit logging on add/move/remove

const onAnnotationAdd = (args) => {
  sendTelemetry('annotation.add', { id: args.annotationId, page: args.pageIndex, time: new Date().toISOString() })
}

const onAnnotationMove = (args) => {
  sendTelemetry('annotation.move', { id: args.annotationId, page: args.pageIndex })
}

const onAnnotationRemove = (args) => {
  sendTelemetry('annotation.remove', { id: args.annotationId, page: args.pageIndex })
}

2) Preventing free-text on certain pages

const onBeforeAddFreeText = (args) => {
  if (args.pageIndex === 0) { // e.g., cover page
    args.cancel = true
    // show message to user
  }
}

3) Properties panel for the selected annotation

const onAnnotationSelect = (args) => {
  const ann = args.annotation
  // populate UI with ann.color, ann.opacity, ann.bounds, etc.
}

4) Bulk operations when multiple annotations are selected

const onAnnotationSelect = (args) => {
  if (args.isMultiSelect) {
    args.annotationCollection.forEach(a => applyBulkChange(a.annotationId))
  }
}

---

Tips

• Always check the type before reading type-specific fields.
• For validations that must stop an action, prefer before* events (only beforeAddFreeText supports cancellation today).
• Use annotationPropertiesChange to react to fine-grained property edits — it includes boolean flags to indicate what changed.

Annotation Settings in Vue PdfViewer Component

Description: Configure PDF annotation settings to control appearance, behavior, and interaction of text markup, shape, and stamp annotations in the ejs-pdfviewer component. Customize colors, styles, author details, and access restrictions.

Table of Contents

• Overview
• Quick Start
• Global vs Type-Specific Settings
• Annotation Types Available
• Settings Properties Reference
• Annotation-Related Component Properties
• Core Annotation Settings Props
• Common Use Cases
• Selector Customization
• Type Definitions

Important: Bounds Format for Annotations (Lowercase)

⚠️ When adding annotations programmatically, ALWAYS use lowercase property names in the bounds object:

<!-- CORRECT ✅ - Use LOWERCASE bounds -->
<script setup>
const pdfViewer = ref(null);

pdfViewer.value.ej2Instances.annotation.addAnnotation('Rectangle', {
  bounds: { x: 100, y: 100, width: 200, height: 50 },
  color: '#FF0000'
});
</script>

<!-- INCORRECT ❌ - Do NOT use capitalized letters -->
<script setup>
pdfViewer.value.ej2Instances.annotation.addAnnotation('Rectangle', {
  bounds: { X: 100, Y: 100, Width: 200, Height: 50 },  // WRONG for annotations
  color: '#FF0000'
});
</script>

---

Overview

Configure annotation settings immediately to control how PDF annotations display and behave in your viewer. Choose between applying settings globally to all annotation types or customizing individual annotation behaviors through type-specific properties like :highlightSettings, :areaSettings, :stampSettings, etc.

When to use: Whenever you need to customize annotation appearance (colors, size, opacity), control user interactions (lock state, allowed actions), set author details, or restrict features (disable downloads/printing).

Quick Start

Apply Settings to Specific Annotation Type

Customize appearance and behavior for individual annotation types by binding type-specific props:

Vue 3 – Composition API

<template>
  <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath"
    :highlightSettings="highlightSettings" style="height:640px" />
</template>

<script setup>
import { provide } from 'vue';
import { PdfViewerComponent as EjsPdfviewer, Toolbar, Annotation, TextSelection }
  from '@syncfusion/ej2-vue-pdfviewer';

const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
const highlightSettings = { color: 'green', opacity: 0.6, author: 'John Doe', isLock: false };

provide('PdfViewer', [Toolbar, Annotation, TextSelection]);
</script>

Vue 3 – Options API

<template>
  <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath"
    :highlightSettings="highlightSettings" style="height:640px" />
</template>

<script>
import { PdfViewerComponent, Toolbar, Annotation, TextSelection }
  from '@syncfusion/ej2-vue-pdfviewer';
export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
      highlightSettings: { color: 'green', opacity: 0.6, author: 'John Doe', isLock: false }
    };
  },
  provide: { PdfViewer: [Toolbar, Annotation, TextSelection] }
}
</script>

Vue 2

<template>
  <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath"
    :highlightSettings="highlightSettings" />
</template>

<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Annotation, TextSelection }
  from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
      highlightSettings: { color: 'green', opacity: 0.6, author: 'John Doe', isLock: false }
    };
  },
  provide: { PdfViewer: [Toolbar, Annotation, TextSelection] }
}
</script>

Use this when: You need to control how a specific annotation type (highlight, underline, stamp, etc.) appears and behaves across your PDF.

Apply Global Settings to All Annotations

<template>
  <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath"
    :annotationSettings="annotationSettings" style="height:640px" />
</template>

<script setup>
import { provide } from 'vue';
import { PdfViewerComponent as EjsPdfviewer, Toolbar, Annotation }
  from '@syncfusion/ej2-vue-pdfviewer';

const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
const annotationSettings = { author: 'PDF Author', opacity: 0.7, isLock: false };

provide('PdfViewer', [Toolbar, Annotation]);
</script>

Use this when: You need a uniform author name, opacity, or lock state applied to every annotation type.

---

Global vs Type-Specific Settings

Global Settings (:annotationSettings):

• Applied to all annotation types unless overridden
• Best for company-wide policies (author name, lock state, download restrictions)
• Properties: author, subject, customData, isLock, isPrint, skipDownload, skipPrint, maxWidth, maxHeight, minWidth, minHeight, opacity, allowedInteractions

Type-Specific Settings:

• Override global settings for individual annotation behaviors
• Best for controlling how each annotation type looks and acts
• Examples: :highlightSettings, :areaSettings, :stampSettings, :freeTextSettings
• Each type has unique properties (e.g., highlightSettings has enableMultiPageAnnotation, enableTextMarkupResizer)

Decision Guide:

• Set author globally → :annotationSettings
• Customize highlight color only → :highlightSettings
• Lock all annotations → :annotationSettings
• Different colors per type → multiple type-specific props

---

Annotation Types Available

---

Settings Properties Reference

Annotation-Related Component Properties

These properties are available directly on the ejs-pdfviewer component to control annotation-related functionality:

Core Annotation Settings Props

---

Common Use Cases

Use Case 1: Apply Company Branding to All Annotations

const annotationSettings = {
  author: 'Acme Corporation', subject: 'Document Review',
  customData: { department: 'Legal', version: '1.0' }
};
// Bind: :annotationSettings="annotationSettings"

Use Case 2: Make Annotations Non-Editable After Creation

const annotationSettings = { isLock: true, allowedInteractions: [] };

Use Case 3: Customize Highlight and Underline Appearance

const highlightSettings = { color: '#00FF00', opacity: 0.5 };
const underlineSettings = { color: '#0000FF', opacity: 0.4 };
// Bind: :highlightSettings="highlightSettings" :underlineSettings="underlineSettings"

Use Case 4: Restrict Annotation Download/Print

const annotationSettings = { skipDownload: true, skipPrint: true };

Use Case 5: Customize Resize Handles

const annotationSelectorSettings = {
  resizerBorderColor: '#FF0000', resizerFillColor: '#FFE0E0',
  resizerSize: 8, resizerShape: 'Circle'
};
// Bind: :annotationSelectorSettings="annotationSelectorSettings"

---

Selector Customization

Global – applies to all annotations:

<ejs-pdfviewer :annotationSelectorSettings="{ resizerBorderColor: 'green' }" />

Apply Selection Styling to Specific Annotation Type

Customize resize handles for individual annotation types:

<ejs-pdfviewer :areaSettings="{ annotationSelectorSettings: { resizerBorderColor: 'green' } }" />

---

Type Definitions

AnnotationSettings / All Annotation Type Settings Properties

AnnotationSelectorSettings

CursorType

AnnotationResizerLocation

AnnotationResizerShape

LineHeadStyle

CustomStampSettings

FontStyle

TextAlignment

CalibrationUnit

DynamicStampItem

SignStampItem

StandardBusinessStampItem

API Methods in Vue PdfViewer Component

When user requests programmatic control beyond UI interactions, guide them to these API methods. This reference helps you recommend the right method based on user goals: loading documents, managing form fields, handling annotations, exporting data, or manipulating viewer state.

Your role: Match user intent to the appropriate API methods, explain when to use each method, and provide complete Vue-friendly examples using the PDF Viewer instance.

Table of Contents

• When to Use These APIs
• Get the Viewer Instance in Vue
• API Categories
• Complete API Reference
• Common Parameter Types
• Usage Examples by Scenario

When to Use These APIs

Guide users to these methods when they express these needs:

• "Load a PDF programmatically" → Use load() and unload()
• "Process form data from PDF" → Use exportFormFieldsAsObject() or importFormFields()
• "Add or edit PDF annotations dynamically" → Use annotation.addAnnotation(), deleteAnnotations(), exportAnnotation()
• "Extract text from PDF" → Use extractText() with bounds
• "Implement undo or redo for PDF edits" → Use undo() and redo()
• "Refresh viewer layout after resize" → Use updateViewerContainer()
• "Navigate to specific coordinates" → Use zoomToRect() or the coordinate conversion methods

Alternative guidance: If the user only needs toolbar actions, page navigation, or event handling, route them to the relevant feature reference instead of these APIs.

Get the Viewer Instance in Vue

Use one shared viewer accessor and reuse it for all API calls. This avoids repeating full component code blocks for every method example.

Vue 3 – Composition API

<template>
  <ejs-pdfviewer
    ref="pdfViewer"
    :documentPath="documentPath"
    style="height: 640px" />
</template>

<script setup>
import { ref, provide } from 'vue';
import {
  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
  ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer';

const pdfViewer = ref(null);
const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

provide('PdfViewer', [
  Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,ThumbnailView, Print,
  TextSelection, TextSearch, Annotation, FormFields, FormDesigner ]);
const getViewer = () => pdfViewer.value?.ej2Instances;
</script>

Vue 2 or Vue 3 – Options API Access Pattern

Use the same methods, but access the instance through the component ref:

const viewer = this.$refs.pdfViewer?.ej2Instances;

Module Access Pattern

• Viewer-level methods → viewer.load(), viewer.download(), viewer.undo()
• Annotation methods → viewer.annotation.addAnnotation(), viewer.annotation.editAnnotation()
• Form designer methods → viewer.formDesigner.addFormField(), viewer.formDesigner.updateFormField()

API Categories

Complete API Reference

How to use this table: Match the user goal to the method, then provide a Vue snippet using const viewer = getViewer(); or const viewer = this.$refs.pdfViewer?.ej2Instances;.

List of Methods

Common Parameter Types

Use these structures when building method calls. Most method signatures are identical to the JavaScript-based Syncfusion API, but in Vue you call them through the viewer instance.

⚠️ CRITICAL: Bounds Format Differs Between Annotations and Form Fields

Annotations use lowercase bounds keys:

const viewer = getViewer();
viewer?.annotation.addAnnotation('Rectangle', {
  bounds: { x: 100, y: 100, width: 200, height: 50 }
});

Form fields use capitalized coordinate keys inside `bounds`:

const viewer = getViewer();
viewer?.formDesigner.addFormField('Textbox', {
  name: 'customerName',
  bounds: { X: 100, Y: 100, Width: 200, Height: 30 }
});

Do not interchange these two formats.

IPoint

When to use: Coordinate conversion and page hit-testing methods.

IRect

When to use: Text extraction, zooming to a region, or annotation bounds.

PageInfo

When to use: Returned by getPageInfo() for page measurements and layout calculations.

FormField

When to use: Returned by retrieveFormFields() or passed to updateFormFields().

PdfAnnotationBase

When to use: Passed to annotation.addAnnotation().

CustomToolbarItem

When to use: Passed to addCustomMenu().

AnnotationType

When to use: Passed to annotation.addAnnotation() or annotation.setAnnotationMode().

Valid values include: 'None', 'Highlight', 'Underline', 'Strikethrough', 'Squiggly', 'Line', 'Arrow', 'Rectangle', 'Circle', 'Polygon', 'Distance', 'Perimeter', 'Area', 'Radius', 'Volume', 'FreeText', 'HandWrittenSignature', 'Ink', 'Stamp', 'Image', 'StickyNotes'

AnnotationSettings

When to use: Optional parameter for annotation.addAnnotation() to customize annotation properties. Annotation settings object can include:

FormFieldType

When to use: Passed to formDesigner.addFormField() or formDesigner.setFormFieldMode().

Valid values include: 'Textbox', 'Password', 'Checkbox', 'RadioButton', 'DropDown', 'ListBox', 'SignatureField', 'InitialField'

FormFieldSettings

When to use: Passed to formDesigner.addFormField() or formDesigner.updateFormField().

CustomStamp

When to use: For custom stamp image definitions.

AnnotationDrawingOptions

When to use: To constrain line and arrow drawing angles.

Usage Examples by Scenario

Use these patterns after establishing the viewer instance once.

Scenario 1: Load and Download a PDF

When: The user wants to open a document dynamically and let the user save it.

const viewer = getViewer();
viewer?.load(documentPath);
viewer?.download();

Scenario 2: Read and Update Form Fields

When: The user needs to prefill or extract form data.

const viewer = getViewer();
const formFields = viewer?.retrieveFormFields();
viewer?.updateFormFieldsValue('firstName', 'John');
viewer?.updateFormFieldsValue('email', 'john@example.com');
const formData = viewer?.exportFormFieldsAsObject();

Scenario 3: Export and Restore Annotations

When: The user wants to persist annotations between sessions.

const viewer = getViewer();
const annotationJson = viewer?.exportAnnotation();
viewer?.importAnnotation(annotationJson);
viewer?.deleteAnnotations('annotation-id-123');

Scenario 4: Extract Text from a Region

When: The user wants text from a specific rectangle.

const viewer = getViewer();
const bounds = { x: 100, y: 150, width: 200, height: 100 };
const extractedText = viewer?.extractText(bounds);

Scenario 5: Zoom to a Target Region

When: The user wants to focus the viewer on a known area.

const viewer = getViewer();
const pageInfo = viewer?.getPageInfo(0);
viewer?.zoomToRect({ x: 50, y: 50, width: 300, height: 300 });

Scenario 6: Undo and Redo Viewer Actions

When: The user edits annotations or forms and needs reversible actions.

const viewer = getViewer();
viewer?.undo();
viewer?.redo();

Scenario 7: Extend the Context Menu

When: The user wants custom actions inside the viewer.

const viewer = getViewer();
const customItems = [
  { id: 'custom-1', text: 'My Action', tooltipText: 'Do something custom' }
];
viewer?.addCustomMenu(customItems, false);
viewer?.showNotificationPopup('PDF loaded successfully', 3000);

Scenario 8: Programmatic Annotation Management

When: The user needs to add, select, edit, or switch annotation modes from code.

• Note: Pagenumber is starts from 1.

const viewer = getViewer();
viewer?.annotation.addAnnotation('Highlight', {
  bounds: { x: 100, y: 100, width: 200, height: 50 },
  pageNumber: 1, color: '#FFFF00', opacity: 0.5, author: 'System',
  subject: 'Auto-highlight', note: 'Important section'
});
viewer?.annotation.selectAnnotation('annotation-id-123');
viewer?.annotation.editAnnotation({
  id: 'annotation-id-123', color: '#FF0000', opacity: 0.8, note: 'Updated comment'
});
viewer?.annotation.setAnnotationMode('Rectangle');
viewer?.annotation.clearSelection();
const rgbaColor = viewer?.annotation.hexToRgba('#FF5733');

Ink Annotation with Path Points (Freehand Drawing):

const viewer = getViewer();
// Add ink annotation with SVG path data representing freehand drawing
viewer?.annotation.addAnnotation('Ink', {
  offset: { x: 150, y: 100 }, pageNumber: 1, width: 200, height: 60,
  path: '[{"command":"M","x":244.83,"y":982.00},{"command":"L","x":250.83,"y":953.33},{"command":"L","x":260.83,"y":920.33}]', strokeColor: '#0000FF', thickness: 2,opacity: 1, author: 'User'
});

Scenario 9: Dynamic Form Field Creation and Management

When: The user needs to create or edit fillable PDF fields in code.

const viewer = getViewer();
viewer?.formDesigner.addFormField('Textbox', {
  name: 'firstName', bounds: { X: 100, Y: 100, Width: 200, Height: 30 },
  value: '', fontSize: 12, fontFamily: 'Helvetica', color: '#000000',
  backgroundColor: '#FFFFFF', borderColor: '#000000',
  thickness: 1, isRequired: true, tooltip: 'Enter your first name'
});
viewer?.formDesigner.addFormField('Checkbox', {
  name: 'agreeTerms', bounds: { X: 100, Y: 150, Width: 20, Height: 20 },
  isChecked: false, borderColor: '#000000', backgroundColor: '#FFFFFF'
});
viewer?.formDesigner.addFormField('DropDown', {
  name: 'country', bounds: { X: 100, Y: 200, Width: 200, Height: 30 },
  options: [
    { itemName: 'USA', itemValue: 'us' }, { itemName: 'Canada', itemValue: 'ca' }, { itemName: 'UK', itemValue: 'uk' }
  ],
  fontSize: 12, fontFamily: 'Helvetica'
});
viewer?.formDesigner.selectFormField('firstName');
viewer?.formDesigner.updateFormField('firstName', {
  backgroundColor: '#FFFF00', fontSize: 14, value: 'John'
});
viewer?.formDesigner.resetFormField('firstName');
viewer?.formDesigner.deleteFormField('firstName', true);
viewer?.formDesigner.setFormFieldMode('Textbox');
viewer?.formDesigner.clearSelection('firstName');
const hexColor = viewer?.formDesigner.getRgbToHex({ r: 255, g: 87, b: 51 });

Scenario 10: Configure Custom Stamps

When: The user wants company-specific stamp images available in the stamp menu.

const customStamps = [
  {
    customStampName: 'Approved',
    customStampImageSource: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'
  },
  {
    customStampName: 'Confidential',
    customStampImageSource: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'
  }
];

Bind the collection through the viewer configuration that supports custom stamps.

Scenario 11: Constrain Annotation Drawing Angles

When: The user wants line and arrow annotations to snap to fixed angles.

const annotationDrawingOptions = {
  enableLineAngleConstraints: true,
  restrictLineAngleTo: 45
};

Bookmark Navigation

Brief: Bookmark navigation lets Vue PDF Viewer apps expose built-in PDF table-of-contents hierarchies for instant jumps across lengthy documents.

⚠️ Critical: Correct API Access

Always call bookmark APIs through the viewer instance's `bookmark` module. Retrieve the underlying EJ2 instance from your Vue ref before calling methods.

// Composition API
const viewerRef = ref(null);
viewerRef.value?.ej2Instances.bookmark.openBookmarkPane();

// Options API
this.$refs.pdfViewer?.ej2Instances.bookmark.goToBookmark(pageIndex, y);

Table of Contents

• When to Use
• Prerequisites
• Enable Bookmarks
• API Methods
• Complete Examples
• Bookmark Data Structure
• Bookmark Properties
• Best Practices

When to Use

Use bookmarks when you need to:

• Navigate large PDFs without manual scrolling
• Surface a built-in table of contents alongside the viewer UI
• Drive custom navigation widgets that jump to specific sections
• Support structured documents such as specs, textbooks, or manuals

Skip bookmark UI when the source PDF lacks embedded bookmarks or when standard page navigation is enough.

Prerequisites

1. Turn on bookmark support via :enableBookmark="true". 2. Register the BookmarkView service (and other services you need) using Vue's provide helper. 3. Point documentPath and, for standalone builds, resourceUrl to valid assets. 4. Ensure the PDF actually contains bookmark metadata—many simple PDFs do not.

Enable Bookmarks

<template>
  <div class="viewer-shell">
    <ejs-pdfviewer
      id="pdfViewer"
      ref="pdfViewer"
      :documentPath="documentPath"
      :enableBookmark="true"
      style="height: 640px"
    />
  </div>
</template>

<script setup>
import {
  PdfViewerComponent as EjsPdfviewer,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  Annotation,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch
} from '@syncfusion/ej2-vue-pdfviewer';
import { provide, ref } from 'vue';

const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
const pdfViewer = ref(null);

provide('PdfViewer', [
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  Annotation,
  ThumbnailView,
  Print,
  TextSelection,
  TextSearch
]);
</script>

<style scoped>
.viewer-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>

API Methods

All signatures below assume you already verified pdfViewerRef.value?.ej2Instances.bookmark (Composition) or this.$refs.pdfViewer?.ej2Instances.bookmark (Options).

1. openBookmarkPane()

Opens the built-in bookmark sidebar.

const openBookmarks = () => {
  pdfViewer.value?.ej2Instances.bookmark.openBookmarkPane();
};

2. closeBookmarkPane()

Closes the bookmark sidebar.

const closeBookmarks = () => {
  pdfViewer.value?.ej2Instances.bookmark.closeBookmarkPane();
};

3. getBookmarks()

Retrieves an array of bookmark nodes. Returns [] when none exist.

const fetchBookmarks = () => {
  const items = pdfViewer.value?.ej2Instances.bookmark.getBookmarks() ?? [];
  bookmarkTree.value = items;
};

4. goToBookmark(pageIndex: number, y: number)

Navigates to a zero-based page index and Y offset. Returns true when the jump succeeds.

const goToBookmark = (node) => {
  if (typeof node?.page === 'number' && typeof node?.y === 'number') {
    const isSuccessful = pdfViewer.value?.ej2Instances.bookmark.goToBookmark(node.page, node.y);
    if (!isSuccessful) {
      console.warn('Bookmark navigation failed');
    }
  }
};

Complete Examples

Example 1: Open/Close Buttons (Composition API)

<template>
  <div>
    <div class="controls">
      <button @click="openBookmark">Open Bookmarks</button>
      <button @click="closeBookmark">Close Bookmarks</button>
    </div>
    <ejs-pdfviewer
      id="pdfViewer"
      ref="pdfViewer"
      :documentPath="documentPath"
      :enableBookmark="true"
      style="height: 600px"
    />
  </div>
</template>

<script setup>
import { PdfViewerComponent as EjsPdfviewer, BookmarkView, Toolbar } from '@syncfusion/ej2-vue-pdfviewer';
import { provide, ref } from 'vue';

const pdfViewer = ref(null);
const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

provide('PdfViewer', [Toolbar, BookmarkView]);

const openBookmark = () => pdfViewer.value?.ej2Instances.bookmark.openBookmarkPane();
const closeBookmark = () => pdfViewer.value?.ej2Instances.bookmark.closeBookmarkPane();
</script>

<style scoped>
.controls {
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
}
</style>

Example 2: Toggle Button (Options API)

<template>
  <div>
    <button @click="toggleBookmarks">
      {{ isPaneOpen ? 'Hide Bookmarks' : 'Show Bookmarks' }}
    </button>
    <ejs-pdfviewer
      id="pdfViewer"
      ref="pdfViewer"
      :documentPath="documentPath"
      :enableBookmark="true"
      style="height: 600px"
    />
  </div>
</template>

<script>
import { PdfViewerComponent, BookmarkView } from '@syncfusion/ej2-vue-pdfviewer';

export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  data: () => ({
    isPaneOpen: false,
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
  }),
  provide() {
    return { PdfViewer: [BookmarkView] };
  },
  methods: {
    toggleBookmarks() {
      const bookmark = this.$refs.pdfViewer?.ej2Instances.bookmark;
      if (!bookmark) return;
      if (this.isPaneOpen) {
        bookmark.closeBookmarkPane();
      } else {
        bookmark.openBookmarkPane();
      }
      this.isPaneOpen = !this.isPaneOpen;
    }
  }
};
</script>

Example 3: Auto-Open Bookmarks on Load

<template>
  <ejs-pdfviewer
    id="pdfViewer"
    ref="pdfViewer"
    :enableBookmark="true"
    :documentPath="documentPath"
    :documentLoad="handleDocumentLoad"
    style="height: 640px"
  />
</template>

<script setup>
import { PdfViewerComponent as EjsPdfviewer, BookmarkView } from '@syncfusion/ej2-vue-pdfviewer';
import { provide, ref } from 'vue';

const pdfViewer = ref(null);
const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

provide('PdfViewer', [BookmarkView]);

const handleDocumentLoad = () => {
  if (pdfViewer.value?.ej2Instances.pageCount > 20) {
    pdfViewer.value.ej2Instances.isBookmarkPanelOpen = true;
  }
};
</script>

Example 4: Custom Bookmark Sidebar

<template>
  <div class="layout">
    <aside>
      <h3>Table of Contents</h3>
      <p v-if="!bookmarks.length">No bookmarks</p>
      <ul v-else>
        <li v-for="bookmark in bookmarks" :key="bookmark.title">
          <button @click="goTo(bookmark)">{{ bookmark.title }}</button>
        </li>
      </ul>
    </aside>
    <section>
      <ejs-pdfviewer
        id="pdfViewer"
        ref="pdfViewer"
        :documentPath="documentPath"
        :enableBookmark="true"
        style="height: 100%"
      />
    </section>
  </div>
</template>

<script setup>
import { PdfViewerComponent as EjsPdfviewer, BookmarkView } from '@syncfusion/ej2-vue-pdfviewer';
import { onMounted, provide, ref } from 'vue';

const pdfViewer = ref(null);
const bookmarks = ref([]);
const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

provide('PdfViewer', [BookmarkView]);

onMounted(() => {
  setTimeout(() => {
    const nodes = pdfViewer.value?.ej2Instances.bookmark.getBookmarks();
    bookmarks.value = nodes ?? [];
  }, 1000);
});

const goTo = (bookmark) => {
  pdfViewer.value?.ej2Instances.bookmark.goToBookmark(bookmark.page, bookmark.y);
};
</script>

<style scoped>
.layout {
  display: flex;
  height: 100vh;
}
aside {
  width: 260px;
  padding: 16px;
  border-right: 1px solid #e2e2e2;
  overflow-y: auto;
}
section {
  flex: 1;
}
button {
  display: block;
  width: 100%;
  margin-bottom: 8px;
}
</style>

Bookmark Data Structure

getBookmarks() returns an array of nodes shaped like the following:

[
  {
    title: 'Chapter 1',
    page: 0,
    y: 120,
    children: [
      { title: 'Section 1.1', page: 1, y: 160, children: [] }
    ]
  },
  { title: 'Chapter 2', page: 4, y: 80, children: [] }
];

Bookmark Properties

isBookmarkPanelOpen lets you control the sidebar's default state.

Example

<ejs-pdfviewer
  ref="pdfViewer"
  :documentPath="documentPath"
  :resourceUrl="resourceUrl"
  :enableBookmark="true"
  :isBookmarkPanelOpen="true"
/>

Or toggle it dynamically:

const handleDocumentLoad = () => {
  const instance = pdfViewer.value?.ej2Instances;
  if (instance?.pageCount > 30) {
    instance.isBookmarkPanelOpen = true;
  }
};

Best Practices

1. Guard ref access: Always confirm pdfViewerRef and bookmark exist before calling methods. 2. Wait for load: Use documentLoad, onMounted delays, or watchers so bookmarks are ready before reading them. 3. Handle empty arrays: Display fallback text when getBookmarks() returns []. 4. Cache results: Store the bookmark list in component state to avoid repeated calls. 5. Validate nodes before jumping: Ensure page/y are valid numbers prior to goToBookmark calls. 6. Defer heavy logic: When loading remote PDFs, add a small timeout or rely on viewer events to avoid accessing the bookmark API too early.

Context Menu

Brief: The Vue PDF Viewer provides a context-aware context menu that dynamically updates based on the right-clicked element. It supports built-in menu items for text, annotations, and form fields, with extensive customization options to add custom items, handle click events, and dynamically show or hide items.

Table of Contents

• When to Use This Guide
• Context Menu Component Properties
• Understanding the Context Menu
• Built-in Context Menu Items
• Text Menu Items
• Annotation Menu Items
• Form Field Menu Items
• Empty Space Menu Items
• Add Custom Context Menu Items
• Handle Click Events for Custom Menu Items
• Dynamic Context Menu Customization
• Disable the Context Menu
• Complete Example with Multiple Custom Menu Items

---

When to Use This Guide

Guide the user to implement context menu functionality when they need to:

• Add custom actions to the right-click menu (e.g., "Search in Google", "Lock annotation")
• Provide context-specific options based on what the user right-clicks (text, annotation, form field)
• Control which menu items appear based on the current selection or document state
• Replace default menu actions with custom business logic
• Disable the context menu entirely for simplified user experiences

Common user requests that require this guide:

• "Add a custom menu item to search selected text"
• "Show different menu options for locked vs unlocked annotations"
• "Disable the default context menu"
• "Add custom actions when right-clicking on form fields"
• "Control when menu items appear or hide dynamically"

---

Context Menu Component Properties

These properties are available directly on the ejs-pdfviewer (PdfViewerComponent) to control context menu-related functionality:

Usage Example

<template>
  <ejs-pdfviewer
    ref="viewer"
    :documentPath="documentPath"
    :serviceUrl="serviceUrl"
    :contextMenuOption="contextMenuOption"
    :contextMenuSettings="contextMenuSettings"
    :disableContextMenuItems="disableContextMenuItems"
  />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  ContextMenuItem
} from '@syncfusion/ej2-vue-pdfviewer';

const viewer = ref<PdfViewerComponent | null>(null);
const documentPath = 'PDF_Succinctly.pdf';
const serviceUrl = 'https://services.syncfusion.com/vue/production/api/pdfviewer';
const contextMenuOption = 'Auto';
const disableContextMenuItems = ['cut', 'paste'];
const contextMenuSettings = {
  contextMenuAction: 'RightClick',
  contextMenuItems: [
    ContextMenuItem.Comment,
    ContextMenuItem.Copy,
    ContextMenuItem.Cut,
    ContextMenuItem.Delete,
    ContextMenuItem.Highlight,
    ContextMenuItem.Paste,
    ContextMenuItem.Properties,
    ContextMenuItem.ScaleRatio,
    ContextMenuItem.Strikethrough,
    ContextMenuItem.Underline
  ]
};

onMounted(() => {
  const instance = viewer.value?.ej2Instances;
  if (instance) {
    instance.contextMenuSettings = contextMenuSettings;
  }
});
</script>

Note: Provide the required services using provide: { pdfviewer: [Toolbar, Magnification, Navigation] } when registering the component, or register them globally if you are using the composition API.

---

Understanding the Context Menu

When implementing context menu functionality, guide the user to understand these capabilities:

• Default Behavior: The viewer automatically provides standard actions (cut, copy, annotation management) based on what the user right-clicks. Use this when the user needs basic functionality without customization.
• Customization: Add custom menu items when the user needs domain-specific actions (e.g., "Search in Google", "Lock annotation"). You can also remove default items or reorder them to match the user's workflow.
• Granular Control: Disable the menu entirely when the user wants a simplified interface, or replace default actions with custom business logic.
• Client-side Interaction: The context menu operates entirely on the client side, ensuring consistent behavior regardless of initial server configuration. This also makes it reliable for offline scenarios.

---

Built-in Context Menu Items

When to reference this section: Guide the user here when they need to understand what default menu items are available or when they want to know which context triggers which menu items.

The context menu displays different default items based on the element being right-clicked. Understanding these built-in items helps when deciding whether to customize, extend, or replace the default menu.

Text Menu Items

Context: These items appear when the user has selected text in the PDF document. Use this knowledge when implementing custom text-related actions or when the user asks about text selection menu options.

Annotation Menu Items

Context: These items appear when the user right-clicks on an existing annotation (highlight, shape, stamp, etc.). Guide the user to this section when they need to understand or customize annotation-related menu actions.

Form Field Menu Items

Context: These items appear when the viewer is in form designer mode and the user right-clicks on a form field (textbox, checkbox, dropdown, etc.). Reference this when the user is building form design functionality.

Empty Space Menu Items

Context: These items appear when the user right-clicks on empty space (no text selection, no annotation, no form field). This is useful for paste operations after copying/cutting annotations or form fields.

---

Add Custom Context Menu Items

When to use: Guide the user to add custom menu items when they need domain-specific actions beyond the built-in options. Common scenarios include:

• Adding "Search in Google" for selected text
• Adding "Lock/Unlock annotation" for security workflows
• Adding "Submit form" or "Validate form" for form processing
• Adding integration actions (e.g., "Save to database", "Send to API")

Decision point:

• Use hideDefaultMenu: false when the user wants to extend the default menu with additional options
• Use hideDefaultMenu: true when the user wants to completely replace the default menu with custom actions only

Method

addCustomMenu(menuItems, hideDefaultMenu?, addAtBottom?)

Adds custom options to the context menu using the addCustomMenu() method. Call this during the documentLoad event to ensure the viewer is fully initialized before customization.

Parameters

• menuItems: Array of custom menu item objects (see structure below)
• hideDefaultMenu (optional): Set to true to show only custom items, false to keep default items alongside custom ones (default: false)
• addAtBottom (optional): Set to true to place custom items at the bottom of the menu, false for top placement (default: false)

Menu Item Object Structure

Each custom menu item requires these properties:

{
  text: string;           // Display text for the menu item
  id: string;             // Unique identifier for the menu item
  iconCss?: string;       // CSS class for the icon (e.g., 'e-icons e-search')
}

Implementation Example

Scenario: User wants to add "Search in Google" for text and "Lock/Unlock" for annotations.

const menuItems = [
  { text: 'Search In Google', id: 'search_in_google', iconCss: 'e-icons e-search' },
  { text: 'Lock Annotation', iconCss: 'e-icons e-lock', id: 'lock_annotation' },
  { text: 'Unlock Annotation', iconCss: 'e-icons e-unlock', id: 'unlock_annotation' },
  { text: 'Lock Form Fields', iconCss: 'e-icons e-lock', id: 'read_only_true' },
  { text: 'Unlock Form Fields', iconCss: 'e-icons e-unlock', id: 'read_only_false' }
];

const documentLoad = () => {
  const instance = viewer.value?.ej2Instances;
  if (instance) {
    instance.addCustomMenu(menuItems, false);
  }
};

Attach documentLoad to the component (@documentLoad="documentLoad"). Calling addCustomMenu() here ensures the viewer is fully initialized. Setting hideDefaultMenu to false preserves the built-in functionality while extending it with custom actions.

---

Handle Click Events for Custom Menu Items

When to implement: After adding custom menu items with addCustomMenu(), implement this event handler to define what happens when the user clicks each custom menu item.

Purpose: This event bridges the UI (menu item) with your business logic (search, lock, submit, etc.).

Event Method

customContextMenuSelect(args)

This event fires when the user clicks a custom menu item. Use the args.id to determine which item was clicked and execute the corresponding action.

Parameters

• args.id: The unique identifier of the clicked menu item (matches the id you defined in addCustomMenu())
• args.cancel: Set to false to allow the default action (typically used with annotation/form field operations)

Implementation Pattern

const customContextMenuSelect = (args) => {
  const instance = viewer.value?.ej2Instances;
  if (!instance) {
    return;
  }

  switch (args.id) {
    case 'search_in_google':
      if (instance.textSelectionModule?.isTextSelection) {
        instance.textSelectionModule.selectionRangeArray.forEach((range) => {
          if (/\S/.test(range.textContent)) {
            window.open('https://www.google.com/search?q=' + range.textContent);
          }
        });
      }
      break;
    case 'lock_annotation':
      toggleAnnotationLock(instance, true, args);
      break;
    case 'unlock_annotation':
      toggleAnnotationLock(instance, false, args);
      break;
    case 'read_only_true':
      setFormFieldsReadOnly(instance, true, args);
      break;
    case 'read_only_false':
      setFormFieldsReadOnly(instance, false, args);
      break;
    default:
      break;
  }
};

const toggleAnnotationLock = (instance, lock, args) => {
  const selected = instance.selectedItems.annotations?.[0];
  if (!selected) {
    return;
  }
  const target = instance.annotationCollection.find(
    (annotation) => annotation.uniqueKey === selected.id
  );
  if (target?.annotationSettings) {
    target.annotationSettings.isLock = lock;
    target.isCommentLock = lock;
    instance.annotation.editAnnotation(target);
    args.cancel = false;
  }
};

const setFormFieldsReadOnly = (instance, isReadOnly, args) => {
  instance.selectedItems.formFields.forEach((field) => {
    if (field) {
      instance.formDesignerModule.updateFormField(field, { isReadOnly });
    }
  });
  args.cancel = false;
};

Result: When the user right-clicks an annotation and selects "Lock Annotation", the annotation becomes read-only. Selecting "Unlock Annotation" restores editing capability, and the same handler covers read-only toggles for form fields.

---

Dynamic Context Menu Customization

When to use: Implement this when the user needs menu items to appear or hide based on context. This is essential for:

• Showing "Search in Google" only when text is selected
• Showing "Lock" only for unlocked annotations, and "Unlock" only for locked ones
• Hiding menu items that aren't applicable to the current selection
• Creating intelligent, context-aware menus that adapt to user actions

Why this matters: Without dynamic customization, all custom menu items appear in every context menu, which creates a cluttered and confusing user experience.

Event Method

customContextMenuBeforeOpen(args)

This event fires just before the context menu is displayed, giving you the opportunity to show or hide menu items based on the current selection or document state.

Parameters

• args.ids: Array of all menu item IDs (both default and custom) that are about to be displayed
• args: Event arguments containing menu state information

Implementation Pattern

const customContextMenuBeforeOpen = (args) => {
  const instance = viewer.value?.ej2Instances;
  if (!instance) {
    return;
  }

  args.ids.forEach((id) => {
    const menuElement = document.getElementById(id);
    if (!menuElement) {
      return;
    }

    menuElement.style.display = 'none';

    if (id === 'search_in_google' && instance.textSelectionModule?.isTextSelection) {
      menuElement.style.display = 'block';
    } else if (id === 'lock_annotation' || id === 'unlock_annotation') {
      const isLockOption = id === 'lock_annotation';
      const annotation = instance.selectedItems.annotations?.[0];
      if (annotation?.annotationSettings) {
        const shouldDisplay = (isLockOption && !annotation.annotationSettings.isLock) ||
          (!isLockOption && annotation.annotationSettings.isLock);
        menuElement.style.display = shouldDisplay ? 'block' : 'none';
      }
    } else if (id === 'read_only_true' || id === 'read_only_false') {
      const isReadOnlyOption = id === 'read_only_true';
      const formField = instance.selectedItems.formFields?.[0];
      if (formField) {
        const shouldDisplay = (isReadOnlyOption && !formField.isReadonly) ||
          (!isReadOnlyOption && formField.isReadonly);
        menuElement.style.display = shouldDisplay ? 'block' : 'none';
      }
    }
  });
};

Result: The menu intelligently adapts — "Search in Google" only appears when text is selected, and lock/unlock options appear based on the current state of the annotation. Form-field menu items show or hide depending on whether the selected fields are currently read-only.

---

Disable the Context Menu

When to use: Guide the user to disable the context menu when they need:

• A simplified, distraction-free PDF viewing experience
• To prevent users from accessing any context menu actions
• To implement completely custom right-click behavior using standard browser events
• To meet specific security or compliance requirements that prohibit context menus

Trade-off: Disabling the context menu removes all built-in functionality (copy, cut, paste, annotation management). Only do this if the user explicitly requests it or if you're implementing a completely custom alternative.

Property

contextMenuOption

Set this property to 'None' to completely disable the context menu.

Implementation

<template>
  <ejs-pdfviewer
    :contextMenuOption="'None'"
  />
</template>

---

Complete Example with Multiple Custom Menu Items

Bring everything together by combining the base setup and the handlers defined earlier. The template below wires the events, while the <script setup> block should include the menuItems, documentLoad, customContextMenuSelect, toggleAnnotationLock, setFormFieldsReadOnly, and customContextMenuBeforeOpen implementations already covered above.

<template>
  <ejs-pdfviewer
    ref="viewer"
    :documentPath="documentPath"
    :serviceUrl="serviceUrl"
    @documentLoad="documentLoad"
    @customContextMenuSelect="customContextMenuSelect"
    @customContextMenuBeforeOpen="customContextMenuBeforeOpen"
  />
</template>

<script setup lang="ts">
import { ref, provide } from 'vue';
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation
} from '@syncfusion/ej2-vue-pdfviewer';

const viewer = ref<PdfViewerComponent | null>(null);
const documentPath = 'PDF_Succinctly.pdf';
const serviceUrl = 'https://services.syncfusion.com/vue/production/api/pdfviewer';

// Paste the menuItems array plus the handlers from the previous sections here.
// They can live in this block or be imported from a dedicated composable.

provide('pdfviewer', [Toolbar, Magnification, Navigation]);
</script>

For production scenarios, remember to register the dependency services:

provide('pdfviewer', [Toolbar, Magnification, Navigation]);

documentLoad, customContextMenuSelect, and customContextMenuBeforeOpen are bound in the template, ensuring the Vue PDF Viewer adds custom menu items, responds to click actions, and dynamically toggles menu visibility.

---

Download

Table of Contents

• When to Use Download
• Choosing a Download Approach
• Toolbar Download
• Programmatic Download
• Download with Event Interception
• Flatten Annotations Before Download

When to Use Download

Guide teams to wire up the download feature whenever users must persist the exact state of the currently loaded PDF. This covers annotations, form-field edits, ink drawings, comments, redactions, and page organizer changes that occur inside the viewer session.

Common scenarios:

• A filled form needs to be saved locally or uploaded elsewhere
• An annotated review copy must be exported with visible markups
• Page order changes need to be captured in an updated PDF
• Business workflows require generating a finalized, tamper-resistant PDF

Choosing a Download Approach

Need an out-of-the-box button in the viewer UI? → Enable the built-in toolbar download experience.

Need to initiate download from custom Vue UI or workflow logic? → Use the download() method on the viewer instance.

Need to intercept and customize the file before it leaves the browser? → Handle the downloadStart event and use saveAsBlob() for bespoke processing.

---

Toolbar Download

The simplest path is to expose the stock download icon by injecting the Toolbar module and keeping enableDownload set to true (default). You can also explicitly list DownloadOption inside toolbarSettings.toolbarItems if you are composing a custom toolbar.

Implementation

<template>
  <div class="viewer-wrapper">
    <ejs-pdfviewer
      id="pdfViewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :toolbarSettings="toolbarSettings"
      :enableDownload="true"
    />
  </div>
</template>

<script setup>
import { provide } from 'vue';
import {
  PdfViewerComponent as EjsPdfviewer,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  BookmarkView
} from '@syncfusion/ej2-vue-pdfviewer';

provide('PdfViewer', [Toolbar, Magnification, Navigation, Annotation, BookmarkView]);

const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
const toolbarSettings = {
  toolbarItems: [
    'PageNavigationTool',
    'MagnificationTool',
    'AnnotationEditTool',
    'DownloadOption'
  ]
};
</script>

Users now click the download icon to export the document with every edit made in the viewer.

---

Programmatic Download

When the download action must tie into external Vue UI (custom buttons, form wizards, timed auto-save, etc.), grab the component reference and call download().

API: download()

Triggers a download of the currently loaded PDF and includes all client-side modifications.

Implementation (Composition API)

<template>
  <div>
    <button @click="downloadCurrentPdf">Save PDF</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';
import { PdfViewerComponent as EjsPdfviewer, Toolbar } from '@syncfusion/ej2-vue-pdfviewer';

provide('PdfViewer', [Toolbar]);

const pdfviewer = ref(null);
const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

const downloadCurrentPdf = () => {
  pdfviewer.value?.ej2Instances.download();
};
</script>

API: downloadFileName

Controls the filename used during download.

<ejs-pdfviewer
  id="pdfViewer"
  downloadFileName="CustomerApplication"
  :documentPath="documentPath"
/>

This saves the exported PDF as CustomerApplication.pdf for both toolbar-triggered and programmatic downloads.

---

Download with Event Interception

Use the downloadStart event to run validations, audit logic, watermarks, or to replace the default download behavior entirely.

API: downloadStart

• Type: DownloadStartEventArgs
• Key property: cancel – set to true to abort the built-in download and run custom logic.

Implementation

<template>
  <ejs-pdfviewer
    id="pdfViewer"
    ref="pdfviewer"
    :documentPath="documentPath"
    @downloadStart="onDownloadStart"
  />
</template>

<script setup>
import { ref, provide } from 'vue';
import { PdfViewerComponent as EjsPdfviewer, Toolbar } from '@syncfusion/ej2-vue-pdfviewer';

provide('PdfViewer', [Toolbar]);

const pdfviewer = ref(null);
const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

const onDownloadStart = (args) => {
  if (!pdfviewer.value?.ej2Instances?.isDocumentEdited) {
    return; // default download is fine
  }

  args.cancel = true;
  runCustomSaveFlow();
};

const runCustomSaveFlow = async () => {
  const blob = await pdfviewer.value.ej2Instances.saveAsBlob();
  // upload blob to storage, show toast, etc.
};
</script>

---

Flatten Annotations Before Download

Flattening bakes annotations, handwritten signatures, and form data into the page content so they cannot be altered in downstream PDF tools. This is useful for compliance, archival, or final approval workflows.

API: saveAsBlob()

Returns a Blob that represents the current PDF (post-edit). Combine it with the downloadStart interception hook.

Implementation

import { PdfDocument } from '@syncfusion/ej2-pdfviewer';

const blobToBase64 = (blob: Blob): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = () => reject(reader.error);
    reader.onload = () => {
      const dataUrl = reader.result as string;
      resolve(dataUrl.split(',')[1]);
    };
    reader.readAsDataURL(blob);
  });
};

const flattenPdfAndSave = async () => {
  const blob = await pdfviewer.value.ej2Instances.saveAsBlob();
  const base64 = await blobToBase64(blob);
  const document = new PdfDocument(base64);
  document.flatten = true;
  document.save(`${pdfviewer.value.ej2Instances.fileName}.pdf`);
  document.destroy();
};

const onDownloadStart = async (args: DownloadStartEventArgs) => {
  args.cancel = true;
  await flattenPdfAndSave();
};

Notes

• saveAsBlob() captures annotations, form fields, and other viewer-side edits.
• Flattening prevents recipients from modifying embedded markups once the PDF leaves the app.
• Include additional processing (e.g., watermarking) inside flattenPdfAndSave before calling document.save.

Next: Review the complete Vue setup in getting-started.md for module registration, resource configuration, and viewer layout.

Form Field Events

Goal: Syncfusion Vue PDF Viewer exposes granular form designer events so Vue apps can react whenever a form field is created, selected, updated, moved, or validated. These hooks surface the metadata you need to drive UI rules, analytics, or custom persistence without polling the viewer state.

Subscribing to form-field events in Vue

Attach handlers on <ejs-pdfviewer> by using Vue event modifiers. Each event keeps its camelCase name.

<template>
  <ejs-pdfviewer
    ref="viewer"
    :serviceUrl="serviceUrl"
    :documentPath="documentPath"
    @formFieldAdd="onFieldAdd"
    @formFieldClick="onFieldClick"
    @formFieldPropertiesChange="onFieldPropsChange"
  />
</template>

<script setup>
const serviceUrl = 'https://services.syncfusion.com/vue/production/api/pdfviewer'
const documentPath = 'FormTemplate.pdf'

const onFieldAdd = (args) => {
  console.log('Field created', args.field?.name)
}

const onFieldClick = (args) => {
  if (args.cancel) {
    return
  }
  console.log('Clicked field id', args.field?.id)
}

const onFieldPropsChange = (args) => {
    console.log('Updated props', args.changedProperties)
}
</script>

Every handler receives an args object documented below. Use the same approach inside the Options API (methods) if you are not on <script setup>.

---

Event catalog (Vue)

All event names align with the React reference so that cross-platform documentation stays consistent.

---

FormFieldInfo schema

FormFieldInfo describes one form field instance and is returned by most of the events above.

---

PdfBounds structure

PdfBounds captures the rectangle used for movement and resize events.

---

FormFieldType values

---

FontStyle values

---

TextAlignment values

---

Behavior tips

• UI actions and programmatic calls raise the same events, so a single handler covers both scenarios.
• Property-change notifications are immediate—persist your data store whenever formFieldPropertiesChange fires.
• validateFormFields only runs when print/download is initiated, letting you block those flows while keeping editing fluid.
• Every supported form field type listed above emits the same events, so you can branch using args.field.type when necessary.