Syncfusion Javascript Pdf Viewer

Syncfusion TypeScript PdfViewer – UI Sample Generator

Generate Code for the User's Project (default)

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

Purpose: Generate minimal, copy-pasteable TypeScript (.ts) and HTML code that the user can integrate directly into their TypeScript EJ2 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 TypeScript 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 (check for @syncfusion/ej2-pdfviewer or @syncfusion/ej2 dependency)
• tsconfig.json (TypeScript configuration)
• webpack.config.js (EJ2 quickstart uses webpack)
• src/index.ts or src/app.ts (main TypeScript entry point)
• src/index.html (HTML container file)
• Output: Confirm the detected application type is a TypeScript EJ2 webpack project (NOT a React/Vue/Angular project) before proceeding.
• CRITICAL: This skill generates vanilla TypeScript code using the EJ2 PdfViewer class. Do NOT generate React, Angular, or Vue component code.

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
• CLASS-BASED APPROACH (MANDATORY - TypeScript EJ2 PATTERNS ONLY):
• Import PdfViewer and required module classes from @syncfusion/ej2-pdfviewer
• Use PdfViewer.Inject(...) to inject required feature modules
• Instantiate with new PdfViewer({ ... }) or new PdfViewer() and set properties
• Mount to DOM using viewer.appendTo('#ElementId')
• NEVER use JSX, TSX, React hooks, or component-based syntax
• NEVER use `<PdfViewerComponent>`, `<Inject services={...}>`, `useState`, `useRef`, or `useEffect`
• 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 Guide

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. If no keyword matches, return only the basic sample.

Checklist Before Generating Code

• [ ] Count the settings properties: 1-3? → Pass inline in constructor | 4+? → Extract to typed constant
• [ ] Are enums involved? Yes → Must use typed constant with enum imports | No → Can pass inline
• [ ] Is it reused elsewhere? Yes → Use constant | No → Prefer inline
• [ ] Do I need type safety? Yes → Import the model type | No → Skip model type import
• [ ] Do I need enums? Yes → Import required enums from @syncfusion/ej2-pdfviewer | No → Skip enum imports
• [ ] Package name correct? Always import from @syncfusion/ej2-pdfviewer — NEVER from @syncfusion/ej2-typescript-pdfviewer

🎯 Core Setup & Configuration

📐 Navigation & Page Management

� Comments & Panels

�🔍 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

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
         ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
                BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

🔄 DOCUMENT LIFECYCLE REQUIREMENTS (CRITICAL)

When to Use documentLoad Event

Certain operations MUST be performed inside the documentLoad event callback, not immediately after instantiation:

Operations that REQUIRE `documentLoad`:

• ✅ Adding form fields programmatically (formDesigner.addFormField())
• ✅ Adding annotations (annotation.addAnnotation())
• ✅ Accessing form field collections (formFieldCollections)
• ✅ Accessing document metadata
• ✅ Modifying document-dependent properties

Operations safe at instantiation time:

• ✅ Setting enableToolbar, enableAnnotation, etc.
• ✅ Setting viewer properties like width, height
• ✅ Configuring settings objects

Example: Correct Timing for Form Fields

❌ WRONG - Causes "formFieldCollections.findIndex is not a function":

let pdfviewer = new PdfViewer({
  documentPath: 'https://...',
  resourceUrl: 'https://...'
});
pdfviewer.appendTo('#PdfViewer');

// ERROR! formFieldCollections not yet initialized
pdfviewer.formDesigner.addFormField('Textbox', { ... });

✅ CORRECT - Inside documentLoad callback:

let pdfviewer = new PdfViewer({
  documentPath: 'https://...',
  resourceUrl: 'https://...',
  documentLoad: () => {
    // SAFE - Document fully loaded, formFieldCollections initialized
    pdfviewer.formDesigner.addFormField('Textbox', { ... });
  }
});
pdfviewer.appendTo('#PdfViewer');

---

⚙️ SETTINGS CONFIGURATION BEST PRACTICES

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

Rule 1: Simple Settings → Pass directly to the PdfViewer constructor

Use this approach when:

• Configuring only 1-3 properties
• Settings are straightforward without complex enums or custom types

Example (DO THIS):

import { PdfViewer, Toolbar, Annotation } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Annotation);

let pdfviewer: PdfViewer = new PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
  annotationSelectorSettings: {
    selectionBorderColor: '#0000ff',
    resizerBorderColor: '#ff0000',
    resizerSize: 8
  }
});
pdfviewer.appendTo('#PdfViewer');

Benefits:

• ✅ No extra imports needed
• ✅ Simple and readable
• ✅ Less code clutter
• ✅ Type checking still works

---

Rule 2: Complex Settings → Define as Typed Constant (OUTSIDE instantiation)

Use this approach when:

• Configuring 4+ properties OR multiple related settings
• Using enums or complex configurations
• Need to reuse the same configuration in multiple places
• Settings are complex enough to warrant separate definition

Example (DO THIS ONLY FOR COMPLEX CASES):

import { PdfViewer, Toolbar, Annotation, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-pdfviewer';
import { AnnotationSelectorSettingsModel } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Annotation);

// Define constant OUTSIDE instantiation with proper types and enums
const annotationSelectorConfig: AnnotationSelectorSettingsModel = {
  selectionBorderColor: '#0000ff',
  selectionBorderThickness: 2,
  resizerBorderColor: '#ff0000',
  resizerFillColor: '#4070ff',
  resizerSize: 8,
  resizerShape: 'Square',
  selectorLineDashArray: [5, 6],
  resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
  resizerCursorType: CursorType.grab
};

let pdfviewer: PdfViewer = new PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
  annotationSelectorSettings: annotationSelectorConfig
});
pdfviewer.appendTo('#PdfViewer');

When to import types and enums:

• [ ] Import model types (e.g., AnnotationSelectorSettingsModel) for TypeScript type checking
• [ ] Import any enums used in the settings (e.g., AnnotationResizerLocation, CursorType)
• [ ] Keep imports minimal - import ONLY what is used

Benefits:

• ✅ Type-safe configuration
• ✅ Proper enum usage
• ✅ Reusable across multiple viewer instances
• ✅ Clean instantiation code

---

Rule 3: NEVER Over-Engineer Simple Cases

❌ DO NOT DO THIS (Over-engineered):

import { PdfViewer, Toolbar } from '@syncfusion/ej2-pdfviewer';
import { ToolbarSettingsModel } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar);

// Unnecessary constant for 2 simple properties
const toolbarSettings: ToolbarSettingsModel = {
  showTooltip: true
};

let pdfviewer: PdfViewer = new PdfViewer({
  toolbarSettings: toolbarSettings
});
pdfviewer.appendTo('#PdfViewer');

✅ DO THIS INSTEAD (Simple & Clean):

import { PdfViewer, Toolbar } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar);

let pdfviewer: PdfViewer = new PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
  toolbarSettings: { showTooltip: true }
});
pdfviewer.appendTo('#PdfViewer');

Common Pitfalls and Corrections

• Extract Pages API location: extractPages() is a method of PdfViewer, not of pageOrganizer. Call pdfviewer.extractPages('1-3'), not pdfviewer.pageOrganizer.extractPages('1-3'). The PageOrganizer service enables the UI and capabilities, but programmatic extraction uses the viewer instance.

• Loading extracted/serialized PDFs: pdfviewer.load(document, password?) accepts two parameters. When loading output returned by extractPages(...), provide the password parameter as an empty string if the document is not protected, for example: pdfviewer.load(extractedPdf, ''). Supply the actual password only for password-protected PDFs.

• Event timing for document-dependent operations: Perform annotation and form field operations inside documentLoad to avoid initialization errors (e.g., formFieldCollections availability).

---

Syncfusion^® JavaScript PDF Viewer Skill

Overview

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

See [SKILL.md](SKILL.md) for the full intent-routing guide and rules. ---

Compatibility

---

Skill Structure

syncfusion-javascript-pdfviewer/
├── SKILL.md                      # Skill rules, routing, and code generation guidelines
├── README.md                     # This file
└── references/
    ├── getting-started.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. Set Up the Development Environment

1.Open a command prompt in your target directory.

2.Clone the Syncfusion Essential JS 2 quickstart project from GitHub:

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart

Navigate into the project

cd ej2-quickstart

2. Install the Package

Syncfusion Essential JS 2 packages are available on npmjs.com. The quickstart project includes the @syncfusion/ej2 meta package in package.json.

npm install

3. Add CSS Imports (src/index.css)

Add the required Syncfusion CSS files to src/styles/styles.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";
@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";

pdfviewer.documentPath = window.location.origin + “/pdfsuccinctly.pdf”; pdfviewer.resourceUrl = window.location.origin + “/ej2-pdfviewer-lib”;

5. Basic Component (src/index.ts)

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
         ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
                BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

6. Run the App

npm start

---

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 in TypeScript PDF Viewer are triggered when annotations are added, removed, moved, resized, selected, or modified on PDF document pages. These events enable custom workflows and UI updates based on annotation interactions.

Table of Contents

• When to Use Annotation Events
• Choosing the Right Event
• How to Use Annotation Events
• Annotation Events Reference
• Annotation Object Reference
• Common Use Cases

---

When to Use Annotation Events

Guide users to implement annotation events when they need to:

• Track user interactions - Log annotation changes for audit trails, analytics, or compliance
• Implement custom workflows - Trigger actions when annotations are added, modified, or removed
• Build custom UI - Update properties panels, toolbars, or status displays based on annotation state
• Enforce business rules - Validate or restrict annotation placement, modifications, or deletions
• Synchronize data - Save annotation changes to a backend, sync across users, or update related data
• Enhance UX - Provide real-time feedback, tooltips, or guided workflows during annotation

Why events matter: The PDF Viewer fires events at key moments in the annotation lifecycle. By handling these events, users can extend the viewer's behavior without modifying its internals.

---

Choosing the Right Event

Help users select the appropriate event based on their goal:

Decision Pattern: If user needs to prevent an action → use beforeAdd* events with args.cancel. If user needs to react after an action → use lifecycle events like annotationAdd, annotationMove, annotationRemove.

---

How to Use Annotation Events

Annotation events allow you to respond to user interactions with annotations in the PDF Viewer. Each event provides detailed information about the annotation and the action performed.

Basic Event Handler Pattern

let viewer: PdfViewer = new PdfViewer({
    annotationAdd: function (args: any): void {
        console.log('Event triggered:', args);
    }
});

---

Annotation Events Reference

The following table lists all available annotation events. Use this reference to identify event names, understand what triggers them, and access the data they provide.

How to read this table:

• Event Name: The property name to use when initializing PdfViewer
• Description: When the event fires during the annotation lifecycle
• Args: The TypeScript type of the event arguments object
• Args Properties: Key properties available in the event handler, including data types

Usage tip: Most events provide annotationId, pageIndex, and the complete annotation object. Use the annotation object to access all properties listed in the Annotation Object Reference section below.

---

Annotation Object Reference

Purpose: When event handlers receive an annotation object in their arguments, use this reference to understand which properties are available and how to access them.

When to consult this reference:

• User needs to read annotation properties (color, opacity, position, type)
• User wants to display annotation details in a custom UI
• User needs to filter or validate annotations based on specific properties
• User is building custom logic based on annotation state

Usage pattern: Access properties directly from the args.annotation object:

const onAnnotationSelect = (args: any): void => {
  const annotation = args.annotation;
  console.log('Type:', annotation.type);       
  if (annotation.type === 'FreeText') {
    console.log('Content:', annotation.content);
  }
};

Property availability: Not all properties are present on all annotation types. Check type or subType to determine which type-specific properties are available.

Core Properties (Available on All Annotation Types)

Type-Specific Properties

Different annotation types expose additional properties. Check the type property to determine which properties are available.

Nested Object Structures

Many annotation properties are complex objects. Use these references to understand their structure and access nested properties.

Rect Object

Purpose: Represents the rectangular boundary of an annotation. Available via args.annotation.rect.

Usage example:

const rect = args.annotation.rect;
console.log(`Position: (${rect.left}, ${rect.top})`);
console.log(`Size: ${rect.width} x ${rect.height}`);

Review Object

Purpose: Contains review/approval status for annotations. Available via args.annotation.review.

Usage example:

if (args.annotation.review) {
  console.log('Review state:', args.annotation.review.state);
  console.log('Reviewed by:', args.annotation.review.author);
}

AnnotationSettings Object

Purpose: Configuration settings for the annotation. Available via args.annotation.annotationSettings.

Usage example:

if (args.annotation.annotationSettings?.isLock) {
  console.log('This annotation is locked');
}

AnnotationSelectorSettings Object

Purpose: Visual appearance settings for annotation selection handles and borders. Available via args.annotation.annotationSelectorSettings.

LabelSettings Object

Purpose: Styling configuration for annotation labels (used in shape and measurement annotations). Available via args.annotation.labelSettings.

Font Object

Purpose: Text formatting properties for free text annotations. Available via args.annotation.font.

Usage example:

if (args.annotation.type === 'FreeText') {
  const font = args.annotation.font;
  if (font.isBold) console.log('Text is bold');
  if (font.isItalic) console.log('Text is italic');
}

Calibrate Object

Purpose: Measurement calibration data for distance/area annotations. Available via args.annotation.calibrate.

Bounds Object

Purpose: Position and dimensions of an annotation. Available via args.annotation.bounds.

Usage example:

const bounds = args.annotation.bounds;
console.log(`Annotation at (${bounds.x}, ${bounds.y})`);
console.log(`Size: ${bounds.width} x ${bounds.height}`);
console.log(`Alternative: left=${bounds.left}, top=${bounds.top}, right=${bounds.right}`);

VertexPoint Object

Purpose: Represents individual points in polygon-based annotations. Available via args.annotation.vertexPoints (array).

Usage example:

if (args.annotation.vertexPoints) {
  args.annotation.vertexPoints.forEach((point, index) => {
    console.log(`Point ${index}: (${point.x}, ${point.y})`);
  });
}

---

Common Use Cases

Purpose: Guide users through practical implementations that solve real-world requirements. Each example demonstrates a specific pattern and explains when to apply it.

How to use these examples: 1. Identify the user's requirement (audit logging, access control, custom UI, etc.) 2. Point them to the matching use case 3. Explain how to adapt the pattern to their specific needs 4. Highlight which event properties are essential for their scenario

---

1. Tracking Annotation Changes

User Need: Log user interactions, implement audit trails, or send analytics data.

When to recommend: User mentions "tracking", "logging", "audit", "analytics", "telemetry", or "history".

Pattern: Attach handlers to lifecycle events (annotationAdd, annotationMove, annotationRemove) and log relevant data.

const onAnnotationMove = (args: any): void => {
  logEvent('annotation_moved', {
    annotationId: args.annotationId,
    page: args.pageIndex,
    timestamp: new Date().toISOString()
  });
};
let viewer: PdfViewer = new PdfViewer({
    annotationMove: onAnnotationMove
});
viewer.appendTo('#pdfViewer');

Why this works: annotationMove fires after the move completes, providing the final position. For real-time tracking during drag, use annotationMoving instead.

Key properties: annotationId (identifier), pageIndex (location), timestamp (when).

---

2. Preventing Certain Actions

User Need: Restrict annotation placement on specific pages (e.g., cover pages, signature pages) or enforce business rules.

When to recommend: User mentions "prevent", "restrict", "block", "validation", "business rules", or "access control".

Pattern: Use beforeAddFreeText event and set args.cancel = true to prevent the action.

Important: This is the only event that supports cancellation. Use it for validation before annotations are created.

const onBeforeAddFreeText = (args: any): void => {
  if (args.pageIndex === 0) {
    args.cancel = true;
    alert('Annotations are not allowed on the cover page.');
  }
};
let viewer: PdfViewer = new PdfViewer({
    beforeAddFreeText: onBeforeAddFreeText
});

Why this works: Setting args.cancel = true stops the annotation from being added. The event fires before the action completes, allowing intervention.

Limitation: Currently only available for beforeAddFreeText. For other annotation types, handle in annotationAdd and remove if invalid using deleteAnnotationById().

---

3. Accessing Annotation Properties

User Need: Display annotation details in a properties panel, inspector, or custom UI.

When to recommend: User mentions "properties panel", "inspector", "details view", "custom UI", or "show annotation info".

Pattern: Use annotationSelect to get the full annotation object when user selects an annotation, then display its properties.

const onAnnotationSelect = (args: any): void => {
  const annotation = args.annotation;
  console.log('Color:', annotation.color);
  console.log('Type:', annotation.type);
  console.log('Page:', args.pageIndex);
  updatePropertiesPanel(args.annotationId, annotation);
};
let viewer: PdfViewer = new PdfViewer({
    annotationSelect: onAnnotationSelect
});

Why this works: annotationSelect provides the complete annotation object with all properties. Reference the Annotation Object Reference above to see all available properties.

Key insight: Use args.isMultiSelect to detect if multiple annotations are selected, and args.annotationCollection to process them.

---

4. Validating Property Changes

User Need: Track specific property modifications for compliance, review workflows, or change detection.

When to recommend: User mentions "property changes", "detect modifications", "compliance", "track edits", or "change history".

Pattern: Use annotationPropertiesChange event with boolean flags to identify which properties changed.

const onAnnotationPropertiesChange = (args: any): void => {
  if (args.isColorChanged) {
    console.log('Annotation color changed to:', args.annotation.color);
  }
  if (args.isThicknessChanged) {
    console.log('Annotation thickness changed to:', args.annotation.thickness);
  }
  if (args.isOpacityChanged) {
    console.log('Annotation opacity changed to:', args.annotation.opacity);
  }
};
let viewer: PdfViewer = new PdfViewer({
    annotationPropertiesChange: onAnnotationPropertiesChange
});

Why this works: The event provides boolean flags (isColorChanged, isThicknessChanged, isOpacityChanged) so you can detect exactly what changed without comparing old/new values.

Key properties: Use args.annotation to access the updated property values.

Advanced: Combine with annotationSelect to show real-time property updates in a UI panel.

---

5. Handling Multiple Selections

User Need: Perform bulk operations on multiple annotations (delete all, change color, export selected).

When to recommend: User mentions "bulk operations", "multiple annotations", "select all", "batch processing", or "group actions".

Pattern: Check args.isMultiSelect in annotationSelect event and use args.annotationCollection to process each annotation.

const onAnnotationSelect = (args: any): void => {
  if (args.isMultiSelect) {
    console.log('Multiple annotations selected');
    console.log('Selected annotations count:', args.annotationCollection.length);
    args.annotationCollection.forEach((annotation: any) => {
      console.log('Annotation ID:', annotation.annotationId);
      console.log('Annotation Type:', annotation.type);
    });
  } else {
    console.log('Single annotation selected:', args.annotationId);
  }
};
let viewer: PdfViewer = new PdfViewer({
    annotationSelect: onAnnotationSelect
});

Why this works: annotationCollection contains all selected annotations when isMultiSelect === true. Loop through this array to apply operations to each annotation.

Implementation tip: After bulk operations, use the viewer's API methods (e.g., deleteAnnotationById(), updateAnnotationProperties()) on each annotation ID from the collection.

UI consideration: Provide clear feedback showing how many annotations are selected and which operation will be applied.

Annotation Settings in TypeScript PDF Viewer

Description: Configure PDF annotation settings immediately to control appearance, behavior, and interaction of text markup, shape, and stamp annotations in the PDF Viewer. Customize colors, styles, author details, and access restrictions to achieve specific annotation requirements.

Table of Contents

• Overview
• Quick Start
• Global vs Type-Specific Settings
• Annotation Types Available
• Settings Properties Reference
• Annotation-Related Component Properties
• Core Properties for All Annotations
• Selector Customization
• Common Use Cases
• 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
pdfviewer.annotation.addAnnotation('Rectangle', {
  bounds: { x: 100, y: 100, width: 200, height: 50 },
  fillColor: '#FF0000'
});

// INCORRECT ❌ - Do NOT use capitalized letters
pdfviewer.annotation.addAnnotation('Rectangle', {
  bounds: { X: 100, Y: 100, Width: 200, Height: 50 },  // WRONG for annotations
  fillColor: '#FF0000'
});

---

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).

How to Use the Settings in PDF Viewer

Quick Start

Apply Settings to Specific Annotation Type

Customize appearance and behavior for individual annotation types by setting type-specific properties:

let pdfviewer: PdfViewer = new PdfViewer();
// Customize highlight settings
pdfviewer.highlightSettings = {
  color: '#00ff00',           // Text highlight color
  opacity: 0.6,               // Transparency (0-1)
  author: 'John Doe',         // Who created the annotation
  isLock: false               // Allow user interaction
};

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

Use annotationSettings property to apply common settings across every annotation type at once:

let pdfviewer: PdfViewer = new PdfViewer();
// Global settings for all annotations
pdfviewer.annotationSettings = {
  author: 'PDF Author',
  opacity: 0.7,
  isLock: false,
  skipPrint: false,
  skipDownload: false,
  allowedInteractions: [AllowedInteraction.Select, AllowedInteraction.Move]
};

Use this when: You want consistent author names, security levels, or opacity across all annotations in the PDF.

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:

• Setting author name? → Use annotationSettings (global)
• Customizing highlight color only? → Use highlightSettings (type-specific)
• Locking all annotations? → Use annotationSettings (global)
• Need different colors for different types? → Use multiple type-specific settings

Annotation Types Available

All supported annotation types and their corresponding settings properties:

Settings Properties Reference

Annotation-Related Component Properties

These properties are available directly on the PdfViewer instance to control annotation-related functionality:

Core Properties for All Annotations

| Property Name | Description | Data Type | Applicable To | |-----|-----| | annotationSettings | Settings applicable for all types of annotations | | areaSettings | Settings applicable for area annotations | | arrowSettings | Settings applicable for arrow annotations | | circleSettings | Settings applicable for circle annotations | | distanceSettings | Settings applicable for distance annotations | | freeTextSettings | Settings applicable for free text annotations | | handwrittenSignatureSettings | Settings applicable for handwritten signature annotations | | highlightSettings | Settings applicable for highlight annotations | | inkAnnotationSettings | Settings applicable for ink annotations | | lineSettings | Settings applicable for line annotations | | measurementSettings | Settings applicable for distance, perimeter, area, radius, volume annotations | | perimeterSettings | Settings applicable for perimeter annotations | | polygonSettings | Settings applicable for polygon annotations | | radiusSettings | Settings applicable for radius annotations | | rectangleSettings | Settings applicable for rectangle annotations | | squigglySettings | Settings applicable for squiggly annotations | | stampSettings | Settings applicable for stamp annotations | | stickyNotesSettings | Settings applicable for sticky notes annotations | | strikethroughSettings | Settings applicable for strikethrough annotations | | underlineSettings | Settings applicable for underline annotations | | volumeSettings | Settings applicable for volume annotations |

Common Use Cases

Use Case 1: Apply Company Branding to All Annotations

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.annotationSettings = {
  author: 'Acme Corporation',
  subject: 'Document Review',
  customData: { department: 'Legal', version: '1.0' }
};

Use Case 2: Make Annotations Non-Editable After Creation

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.annotationSettings = {
  isLock: true,           // Prevent editing
  allowedInteractions: [] // Restrict all interactions
};

Use Case 3: Customize Highlight and Underline Appearance

// Make highlights green and underlines blue
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.highlightSettings = { color: '#00FF00', opacity: 0.5 };
pdfviewer.underlineSettings = { color: '#0000FF', opacity: 0.4 };

Use Case 4: Restrict Annotation Download/Print

// Annotations won't appear in exported files or print output
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.annotationSettings = {
  skipDownload: true,  // Hide from downloaded PDFs
  skipPrint: true      // Hide from printed pages
};

Use Case 5: Customize Resize Handles When Editing Annotations

// Control how annotation selection handles appear during editing
let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.annotationSelectorSettings = {
  resizerBorderColor: '#FF0000',    // Red border
  resizerFillColor: '#FFE0E0',      // Light red fill
  resizerSize: 8,                   // Handle size in pixels
  resizerShape: 'Circle',           // Circle or Square
  resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
  resizerCursorType: CursorType.grab
};

Selector Customization

Apply Selection Styling Globally

Apply resize handle customization to all annotations:

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.annotationSelectorSettings = { resizerBorderColor: 'green' };

Apply Selection Styling to Specific Annotation Type

Customize resize handles for individual annotation types:

pdfviewer.areaSettings = {
  annotationSelectorSettings: { resizerBorderColor: 'green' }
};

Type Definitions

AnnotationSelectorSettings

CursorType

AnnotationResizerLocation

AnnotationResizerShape

LineHeadStyle

CustomStampSettings

FontStyle

TextAlignment

CalibrationUnit

DynamicStampItem

SignStampItem

StandardBusinessStampItem

API Methods in TypeScript 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 appropriate API methods, explain when to use each method, and provide complete working examples.

Table of Contents

• When to Use These APIs
• API Categories
• Complete API Reference
• Common Parameter Types
• Usage Examples by Scenario

When to Use These APIs

Guide user to these methods when they express these needs:

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

Alternative approaches: If user needs simple page navigation or UI interactions, refer to navigation.md or events.md instead of programmatic APIs.

API Categories

When user describes their goal, identify which category fits best, then recommend specific methods:

Complete API Reference

How to use this reference: When user describes what they want to do, scan this table for matching methods. Then provide complete code examples with error handling and explain why that method fits their use case.

The table below lists all available methods - use it to recommend the right API based on user intent, not as copy-paste reference material.

List of Methods

Common Parameter Types

When constructing method calls, guide user on parameter structure. Many methods require specific object types - reference these schemas when building examples.

Point

When to use: Methods involving coordinates (click detection, point conversion). Used for coordinate points in the PDF viewer.

Rect

When to use: Methods involving regions (text extraction, zoom to area). Used for rectangular regions in the PDF document.

PageInfoModel

When to use: Returned by getPageInfo() - use for dynamic layout calculations. Contains information about a specific page in the PDF document.

FormFieldModel

When to use: Working with form field methods (retrieve, update, export). Represents a form field in the PDF document.

MenuItemModel

When to use: Required parameter for addCustomMenu() method. Represents a custom menu item.

AnnotationDataFormat

When to use: Used with annotation export/import methods to specify data format. Valid annotation data formats include:

• AnnotationDataFormat.Json - JSON format
• AnnotationDataFormat.Xfdf - XFDF format

FormFieldDataFormat

When to use: Used with form field export/import methods to specify data format. Valid form field data formats include:

• FormFieldDataFormat.Json - JSON format
• FormFieldDataFormat.Xml - XML format
• FormFieldDataFormat.Fdf - FDF format
• FormFieldDataFormat.Xfdf - XFDF format

ExtractTextOption

When to use: Used with extractText() method to specify extraction type. Valid text extraction options include:

• ExtractTextOption.TextAndBounds - Extracts both plain text and text with bounds (layout information)
• ExtractTextOption.TextOnly - Extracts only plain text without bounds information
• ExtractTextOption.BoundsOnly - Extracts text with layout information (bounds/coordinates) only
• ExtractTextOption.None - No text information is returned

Usage Examples by Scenario

Use these patterns when user describes matching scenarios. Provide complete examples with error handling and explain why this approach fits their needs.

Scenario 1: Load and Download PDF

When: User needs to open a PDF file and allow downloading it.

Why: Use load() for dynamic document switching and download() to save modified PDFs client-side without server roundtrip.

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } 
    from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');

// Load a PDF document
viewer.load('document.pdf', null);

// Later, allow user to download
viewer.download();

Scenario 2: Manage Interactive Form Fields

When: Working with fillable PDFs that have form fields (text inputs, checkboxes).

Why: Use retrieveFormFields() to read current state, updateFormFieldsValue() for programmatic pre-fill (e.g., from database), and exportFormFieldsAsObject() for structured data submission.

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } 
    from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('formDocument.pdf', null);

// Retrieve all form fields
const formFields = viewer.retrieveFormFields();
console.log(formFields);

// Update specific field values
viewer.updateFormFieldsValue({
    'firstName': 'John',
    'email': 'john@example.com'
});

// Export filled form data
const formData = await viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json);
console.log(formData);

Scenario 3: Work with Annotations

When: Adding comments, highlights, or other markup to PDFs.

Why: Use exportAnnotation() to save user markup for later sessions, importAnnotation() to restore saved annotations, and deleteAnnotations() for programmatic cleanup.

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, 
    AnnotationDataFormat } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('document.pdf', null);

// Export current annotations
viewer.exportAnnotation(AnnotationDataFormat.Json);

// Export annotations as object
const annotations = await viewer.exportAnnotationsAsObject(AnnotationDataFormat.Json);
console.log(annotations);

// Import previously saved annotations
viewer.importAnnotation(annotationJSON, AnnotationDataFormat.Json);

// Delete all annotations
viewer.deleteAnnotations();

Scenario 4: Extract Text from PDF

When: You need to get text content from a specific region or pages.

Why: Use extractText() with options parameter for targeted text extraction - ideal for processing specific fields, copying text from coordinates, or building search/highlight features.

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, 
    ExtractTextOption } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('document.pdf', null);

// Extract text from a single page
const pageText = await viewer.extractText(0, ExtractTextOption.TextOnly);
console.log('Page 0 text:', pageText);

// Extract text from multiple pages
const rangeText = await viewer.extractText(0, 5, ExtractTextOption.TextAndBounds);
console.log('Pages 0-5 text:', rangeText);

Scenario 5: Navigate and Zoom

When: Programmatically moving to specific pages or zooming regions.

Why: Use getPageInfo() for dynamic layout calculations and zoomToRect() to focus on specific regions (e.g., highlighting search results, focusing on form fields).

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } 
    from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('document.pdf', null);

// Get page information
const pageInfo = viewer.getPageInfo(0);
console.log('Page dimensions:', pageInfo.width, pageInfo.height);

// Zoom to specific rectangular area
const rect = { x: 50, y: 50, width: 300, height: 300 };
viewer.zoomToRect(rect);

Scenario 6: Implement Undo/Redo

When: Allowing users to undo/redo annotations or form changes.

Why: Use undo() and redo() to provide familiar editing experience - essential for annotation workflows where users need to revert mistakes.

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } 
    from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('document.pdf', null);

// User clicks undo button
document.getElementById('undoBtn').addEventListener('click', () => {
    viewer.undo();
});

// User clicks redo button
document.getElementById('redoBtn').addEventListener('click', () => {
    viewer.redo();
});

Scenario 7: Custom UI Integration

When: Adding custom menu items or notifications.

Why: Use addCustomMenu() to extend context menu with app-specific actions (e.g., "Send to Email", "Share") and showNotificationPopup() for in-viewer feedback without blocking dialogs.

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, 
    MenuItemModel } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('document.pdf', null);

// Add custom context menu item
const customItems: MenuItemModel[] = [
    { id: 'custom-1', text: 'My Custom Action', tooltipText: 'Do something custom' }
];
viewer.addCustomMenu(customItems, false, true);

// Show notification
viewer.showNotificationPopup('PDF loaded successfully');

Scenario 8: Coordinate Conversion for Custom Interactions

When: Building custom interactions that require converting between different coordinate systems.

Why: Use coordinate conversion methods to map between client (screen), page, and scrolling coordinates for features like custom annotations, highlights at specific positions, or interactive overlays.

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } 
    from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);

let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('document.pdf', null);

// Get page number from click position
const clientPoint = { x: 100, y: 200 };
const pageNumber = viewer.getPageNumberFromClientPoint(clientPoint);
console.log('Clicked on page:', pageNumber);

// Convert client point to page coordinates
const pagePoint = viewer.convertClientPointToPagePoint(clientPoint, pageNumber);
console.log('Page coordinates:', pagePoint);

// Convert page point back to client coordinates
const newClientPoint = viewer.convertPagePointToClientPoint(pagePoint, pageNumber);
console.log('Client coordinates:', newClientPoint);

// Convert page point to scrolling coordinates
const scrollPoint = viewer.convertPagePointToScrollingPoint(pagePoint, pageNumber);
console.log('Scroll coordinates:', scrollPoint);

Scenario 9: Save PDF as Blob for Upload

When: User needs to save the modified PDF to a server or process it further.

Why: Use saveAsBlob() to get the PDF as a Blob object which can be uploaded to a server using fetch/XMLHttpRequest, or processed client-side.

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } 
    from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('document.pdf', null);
// Save as Blob and upload to server
document.getElementById('saveBtn').addEventListener('click', async () => {
    const blob = await viewer.saveAsBlob();
    // Create FormData to upload
    const formData = new FormData();
    formData.append('file', blob, 'document.pdf');
    // Upload to server
    const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
    });
    if (response.ok) {
        viewer.showNotificationPopup('PDF saved successfully!');
    }
});

Scenario 10: Extract Specific Pages

When: User needs to extract and save specific pages from a PDF.

Why: Use extractPages() to extract specific pages as a new PDF, useful for splitting documents or creating page-specific copies.

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } 
    from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('document.pdf', null);
// Extract pages 1, 3, and 5
const extractedData = viewer.extractPages('1,3,5');
console.log('Extracted data:', extractedData);
// Extract a range of pages (1-5)
const rangeData = viewer.extractPages('1-5');
console.log('Range data:', rangeData);
// Create a blob from extracted data and download
const blob = new Blob([extractedData], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'extracted-pages.pdf';
a.click();

Scenario 11: Update Viewer Container

When: The viewer container is resized or layout changes occur.

Why: Use updateViewerContainer() to refresh the viewer dimensions and layout after container size changes, ensuring proper rendering.

import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } 
    from '@syncfusion/ej2-pdfviewer';
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, 
    BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner);
let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('document.pdf', null);
// Listen for window resize events
window.addEventListener('resize', () => {
    viewer.updateViewerContainer();
});
// Or update after programmatic container resize
document.getElementById('resizeBtn').addEventListener('click', () => {
    const container = document.getElementById('pdfViewer');
    container.style.width = '800px';
    container.style.height = '600px';
    viewer.updateViewerContainer();
});

Scenario 12: Form Field Focus Management

When: User needs to programmatically set focus to a specific form field.

Why: Use focusFormField() to guide users through form filling, highlight required fields, or implement custom navigation.

let viewer: PdfViewer = new PdfViewer();
viewer.serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
viewer.appendTo('#pdfViewer');
viewer.load('formDocument.pdf', null);
// Focus on a specific field by name
viewer.focusFormField('firstName');
// Implement custom form navigation
document.getElementById('nextFieldBtn').addEventListener('click', () => {
    const fields = viewer.retrieveFormFields();
    const currentIndex = fields.findIndex(f => f.name === 'firstName');
    if (currentIndex < fields.length - 1) {
        viewer.focusFormField(fields[currentIndex + 1].name);
    }
});

---

Basic Sample

Description: Complete getting started guide for setting up and using the Syncfusion PDF Viewer in a TypeScript application using Essential JS 2 quickstart seed repository. This guide covers development environment setup, package installation, and basic PDF Viewer implementation.

---

Table of Contents

• Prerequisites
• Set up the development environment
• Add Syncfusion Javascript (ES6) packages
• Import Syncfusion CSS styles
• Add the PDF Viewer component
• Run the application
• Module injection
• Version Information
• Important Notes

Prerequisites

The sample project uses a webpack configuration (webpack.config.js) and the latest webpack-cli. Node.js v14.15.0 or later is required. For details, see the webpack getting started guide.

---

Set up the development environment

Step 1: Clone the quickstart project

Open a command prompt in your target directory and clone the Syncfusion Essential JS 2 quickstart project from GitHub:

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart

Step 2: Navigate to the project folder

cd ej2-quickstart

---

Add Syncfusion Javascript (ES6) packages

Syncfusion Essential JS 2 packages are available on npmjs.com. The quickstart project includes the @syncfusion/ej2 meta package in package.json.

Install dependencies

npm install

---

Import Syncfusion CSS styles

Add the required Syncfusion CSS files to src/styles/styles.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";
@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";

---

Add the PDF Viewer component

Step 1: Configure PDF Viewer in app.ts

In app.ts, import and inject the required modules, then create and configure the PDF Viewer:

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

Step 2: Using Local Resources (Optional)

To use local resources instead of CDN, follow these steps:

• Ensure the ej2-pdfviewer-lib folder (containing pdfium.js, pdfium.wasm, and the PDF file) is present in your project's dist directory.
• Set the documentPath and resourceUrl properties to local paths:

pdfviewer.documentPath = window.location.origin + "/pdfsuccinctly.pdf";
pdfviewer.resourceUrl = window.location.origin + "/ej2-pdfviewer-lib";

Reference Example: For a complete example, see load PDF Viewer with local resources.

Step 3: Add HTML container

Add a container element for the PDF Viewer in index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <!-- PDF Viewer container -->
    <div id="PdfViewer"></div>
</body>
</html>

---

Run the application

The quickstart project is preconfigured to build and launch in the browser. Start the application with:

npm start

Complete Output Example

index.ts:

import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
         ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
                BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);

let pdfviewer: PdfViewer = new PdfViewer();
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
pdfviewer.appendTo('#PdfViewer');

---

Module injection

To enable additional features, inject the required modules using PdfViewer.Inject. The following modules extend the PDF Viewer:

• LinkAnnotation: Hyperlink navigation
• BookmarkView: Bookmark display and navigation
• Magnification: Zoom in/out
• Navigation: Page navigation
• TextSelection: Text selection
• ThumbnailView: Page thumbnails
• Toolbar: Built-in toolbar UI
• Print: Printing support
• Annotation: Annotation features
• TextSearch: Text search
• FormFields: Form field support
• FormDesigner: Form field design and editing

---

Version Information

Resource URL Version: 31.1.23 (as referenced in the CDN path)

---

Important Notes

1. Node.js v14.15.0 or later is required 2. The sample uses webpack configuration and latest webpack-cli 3. The quickstart project includes the @syncfusion/ej2 meta package 4. All Syncfusion packages are available on npmjs.com 5. For local resources, ensure ej2-pdfviewer-lib folder is in the dist directory