Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,8 @@ onPageChange(args: any): void {
- [extractText(pageIndex: number, options?: any)](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#extracttext): — extract text and coordinates.
- [Events](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#events): [documentLoad](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#documentload), [pageRenderComplete](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#pagerendercomplete), [pageChange](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#pagechange), [annotationAdd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotationadd), [annotationRemove](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotationremove), [toolbarClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbarclick).

N> Looking for the full Angular PDF Viewer component overview, features, pricing, and documentation? Visit the [Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) page.

## See Also

- [Nutrient Web SDK (PSPDFKit) getting started](https://www.nutrient.io/sdk/web/getting-started/other-frameworks/angular)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ documentation: ug
control: PDF Viewer
---

# Migrating from Apryse Web Viewer to Syncfusion Angular PDF Viewer
# Migrating from Apryse Web Viewer to Angular PDF Viewer

This guide helps Angular developers migrate applications built using **Apryse Web Viewer** to the **Syncfusion Angular PDF Viewer**. It explains architectural differences, setup changes, feature mapping, and common API replacements specific to an Angular environment.
This guide helps Angular developers migrate applications built using **Apryse Web Viewer** to the **Angular PDF Viewer**. It explains architectural differences, setup changes, feature mapping, and common API replacements specific to an Angular environment.

## Overview

**Apryse Web Viewer** is an SDK-style viewer that is mounted imperatively into a DOM element and exposes a rich JavaScript API surface.

**Syncfusion Angular PDF Viewer** provides a **fully declarative Angular component-based experience**, offering built-in UI, annotations, form fields, text search, and navigation through Angular modules and services—without requiring external runtime SDK initialization.
**Angular PDF Viewer** provides a **fully declarative Angular component-based experience**, offering built-in UI, annotations, form fields, text search, and navigation through Angular modules and services—without requiring external runtime SDK initialization.

Key migration benefits:
- Native Angular component integration
Expand All @@ -25,7 +25,7 @@ Key migration benefits:

## Architecture Differences

| Concept | Apryse Web Viewer | Syncfusion Angular PDF Viewer |
| Concept | Apryse Web Viewer | Angular PDF Viewer |
|--------|-----------------|-------------------------------|
| Integration style | Imperative DOM-based SDK mount | Declarative Angular component |
| Initialization | Web Viewer({...}, element) | `<ejs-pdfviewer>` component |
Expand All @@ -42,7 +42,7 @@ Migration generally involves **removing the Apryse SDK mount** and **replacing i
npm install @pdftron/webviewer
```

### Syncfusion Angular PDF Viewer
### Angular PDF Viewer
```bash
npm install @syncfusion/ej2-angular-pdfviewer
```
Expand Down Expand Up @@ -97,7 +97,7 @@ ngAfterViewInit() {
}
```

### Syncfusion Angular PDF Viewer
### Angular PDF Viewer

```html
<ejs-pdfviewer
Expand Down Expand Up @@ -178,7 +178,7 @@ this.pdfViewer.importAnnotation(annotationData);

1. Create a migration branch
2. Remove Apryse WebViewer SDK usage
3. Install Syncfusion Angular PDF Viewer
3. Install Angular PDF Viewer
4. Add required styles and module imports
5. Replace DOM-based viewer mount with Angular component
6. Gradually enable features: navigation → search → annotation → forms
Expand All @@ -194,8 +194,10 @@ this.pdfViewer.importAnnotation(annotationData);
- [extractText(pageIndex: number, options?: any)](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#extracttext): — extract text and coordinates.
- [Events](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#events): [documentLoad](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#documentload), [pageRenderComplete](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#pagerendercomplete), [pageChange](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#pagechange), [annotationAdd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotationadd), [annotationRemove](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotationremove), [toolbarClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbarclick).

N> Looking for the full Angular PDF Viewer component overview, features, pricing, and documentation? Visit the [Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) page.

## See Also

- [Apryse Angular Web Viewer Getting Started](https://docs.apryse.com/web/guides/get-started/angular)
- [Syncfusion Angular PDF Viewer Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started)
- [Syncfusion Angular PDF Viewer API](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer)
- [Angular PDF Viewer Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started)
- [Angular PDF Viewer API](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer)
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ documentation: ug
control: PDF Viewer
---

# Migrating from PDF.js to Syncfusion Angular PDF Viewer
# Migrating from PDF.js to Angular PDF Viewer

This guide explains how to migrate an existing [PDF.js](https://mozilla.github.io/pdf.js/) implementation to the [Syncfusion Angular PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started). It covers architectural differences, feature mapping, and required code changes.
This guide explains how to migrate an existing [PDF.js](https://mozilla.github.io/pdf.js/) implementation to the [Angular PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started). It covers architectural differences, feature mapping, and required code changes.

## Overview

PDF.js is a low-level JavaScript library that focuses on rendering PDF pages using HTML canvas. Developers are responsible for building navigation, zooming, text selection, annotations, forms, and user interface components.

Syncfusion Angular PDF Viewer is a **high-level Angular component** that provides complete PDF viewing and interaction capabilities out of the box, including UI, performance optimizations, and Angular-friendly APIs.
Angular PDF Viewer is a **high-level Angular component** that provides complete PDF viewing and interaction capabilities out of the box, including UI, performance optimizations, and Angular-friendly APIs.

## Architecture Notes

Expand All @@ -34,7 +34,7 @@ Key migration considerations:
npm install pdfjs-dist
```

### Syncfusion Angular PDF Viewer
### Angular PDF Viewer

```bash
npm install @syncfusion/ej2-angular-pdfviewer
Expand Down Expand Up @@ -72,7 +72,7 @@ pdfjsLib.getDocument('sample.pdf').promise.then(pdf => {
});
```

### Syncfusion Angular PDF Viewer Example
### Angular PDF Viewer Example

```html
<ejs-pdfviewer
Expand Down Expand Up @@ -238,5 +238,5 @@ Use Syncfusion CDN or host locally:
## See Also

- [PDF.js Getting Started](https://mozilla.github.io/pdf.js/getting_started/)
- [Syncfusion Angular PDF Viewer Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started)
- [Syncfusion Angular PDF Viewer API](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer)
- [Angular PDF Viewer Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started)
- [Angular PDF Viewer API](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer)
Original file line number Diff line number Diff line change
Expand Up @@ -256,4 +256,4 @@ The PDF Viewer component's accessibility levels are ensured through an [accessib

## See also

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components](../common/accessibility)
* [Accessibility in Angular components](../common/accessibility)
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ domainurl: ##DomainURL##
---
# Annotations in mobile view in Angular PDF Viewer

This article describes how to use annotation tools in the Syncfusion Angular PDF Viewer on touch-enabled devices. It covers enabling the annotation toolbar; adding sticky notes, text markups, shapes, measurements, stamps, signatures, and ink; adjusting annotation properties before and after placement; using comments; and removing annotations.
This article describes how to use annotation tools in the Angular PDF Viewer on touch-enabled devices. It covers enabling the annotation toolbar; adding sticky notes, text markups, shapes, measurements, stamps, signatures, and ink; adjusting annotation properties before and after placement; using comments; and removing annotations.

## Open the annotation toolbar

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---

# Syncfusion Angular PDF Viewer in Angular Universal (SSR)
# Angular PDF Viewer in Angular Universal (SSR)

This guide shows how to create an Angular Universal SSR application and integrate the Syncfusion Angular PDF Viewer component.
This guide shows how to create an Angular Universal SSR application and integrate the Angular PDF Viewer component.

## Prerequisites

Expand Down Expand Up @@ -38,11 +38,11 @@ npm run build
npm run serve:ssr:angular-ssr-pdfviewer
```

## Install Syncfusion Angular PDF Viewer
## Install Angular PDF Viewer

### Step 3: Install Syncfusion PDF Viewer

Install the Syncfusion Angular PDF Viewer package:
Install the Angular PDF Viewer package:

```bash
npm install @syncfusion/ej2-angular-pdfviewer
Expand Down Expand Up @@ -140,5 +140,5 @@ npm run serve:ssr:angular-ssr-pdfviewer

## See Also

- [Syncfusion Angular PDF Viewer Documentation](https://ej2.syncfusion.com/angular/documentation/pdfviewer/pdfviewer-overview)
- [Angular PDF Viewer Documentation](https://ej2.syncfusion.com/angular/documentation/pdfviewer/pdfviewer-overview)
- [Angular Universal Documentation](https://v17.angular.io/guide/ssr)
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ documentation: ug
domainurl: ##DomainURL##
---

# Getting Started with Syncfusion Angular PDF Viewer using Ionic Angular
# Getting Started with Angular PDF Viewer using Ionic Angular

## Overview

This guide covers integrating the Syncfusion Angular PDF Viewer into an Ionic Angular application. Ionic provides a cross-platform UI framework built on Angular.
This guide covers integrating the Angular PDF Viewer into an Ionic Angular application. Ionic provides a cross-platform UI framework built on Angular.

N> This guide assumes you have an existing Ionic Angular project (v8.0+) with Angular v20+. The PDF Viewer works seamlessly with Ionic's tab-based navigation and responsive design patterns.

Expand Down Expand Up @@ -129,7 +129,7 @@ ionic serve

## See Also

- [Syncfusion Angular PDF Viewer Documentation](https://www.syncfusion.com/angular-components/angular-pdf-viewer)
- [Angular PDF Viewer Documentation](https://www.syncfusion.com/angular-components/angular-pdf-viewer)
- [Ionic Angular Documentation](https://ionicframework.com/docs/angular/overview)
- [Angular Standalone Components](https://v17.angular.io/guide/standalone-components)
- [Capacitor Documentation](https://capacitorjs.com/docs)
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---

# Getting started with Syncfusion Angular PDF Viewer in an Nx Workspace
# Getting started with Angular PDF Viewer in an Nx Workspace

This guide explains how to create an **Nx workspace**, scaffold an **Angular application**, and integrate the **Syncfusion Angular PDF Viewer** using modern **standalone Angular components**.
This guide explains how to create an **Nx workspace**, scaffold an **Angular application**, and integrate the **Angular PDF Viewer** using modern **standalone Angular components**.

## Prerequisites

Expand Down Expand Up @@ -46,7 +46,7 @@ npx nx serve pdf-viewer-app

## Step 4: Install Syncfusion Angular PDF Viewer

Install the Syncfusion Angular PDF Viewer package in your workspace:
Install the Angular PDF Viewer package in your workspace:

```bash
npm install @syncfusion/ej2-angular-pdfviewer --save
Expand Down Expand Up @@ -134,7 +134,7 @@ npx nx serve pdf-viewer-app

## See Also

- [Syncfusion Angular PDF Viewer Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/overview)
- [Angular PDF Viewer Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/overview)
- [Nx Documentation](https://nx.dev/docs)
- [Angular Standalone Components Guide](https://v17.angular.io/docs)
- [Nx Angular Plugin](https://nx.dev/nx-api/angular)
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ documentation: ug
domainurl: ##DomainURL##
---

# Getting Started with Syncfusion Angular PDF Viewer using Vite
# Getting Started with Angular PDF Viewer using Vite

## Overview

This guide explains how to create an Angular application powered by the Vite build system and integrate the Syncfusion Angular PDF Viewer using standalone components.
This guide explains how to create an Angular application powered by the Vite build system and integrate the Angular PDF Viewer using standalone components.

## Prerequisites

Expand Down Expand Up @@ -128,6 +128,6 @@ ng serve

## See Also

- [Syncfusion Angular PDF Viewer Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/overview)
- [Angular PDF Viewer Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/overview)
- [Angular Standalone Components Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started)
- [Angular CLI Application Builder (Vite)](https://angular.dev/tools/cli/build-system-migration)
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Digital Signature Workflows in Angular

This guide shows how to design signature fields, collect handwritten/typed e‑signatures in the browser, and apply **digital certificate (PKI) signatures** to PDF forms using the Syncfusion Angular PDF Viewer and the JavaScript PDF Library. Digital signatures provide **authenticity** and **tamper detection**, making them suitable for legally binding scenarios.
This guide shows how to design signature fields, collect handwritten/typed e‑signatures in the browser, and apply **digital certificate (PKI) signatures** to PDF forms using the Angular PDF Viewer and the JavaScript PDF Library. Digital signatures provide **authenticity** and **tamper detection**, making them suitable for legally binding scenarios.

## Overview

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Validate Digital Signatures in Angular

This guide explains **how to validate digital signatures** on PDFs when using the **Syncfusion Angular PDF Viewer** together with the **JavaScript PDF Library**. It clarifies what the Viewer does (display fields and signature appearances) and what the **PDF Library** does (perform **cryptographic validation** and produce validation results).
This guide explains **how to validate digital signatures** on PDFs when using the **Angular PDF Viewer** together with the **JavaScript PDF Library**. It clarifies what the Viewer does (display fields and signature appearances) and what the **PDF Library** does (perform **cryptographic validation** and produce validation results).

N> **Important:** The Angular PDF Viewer renders signature fields and their visual appearances, but **cryptographic validation is performed by the JavaScript PDF Library**. Use the library to check integrity, certificate trust, and timestamp status, and surface the result in your UI.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Load Large PDF Files in Angular PDF Viewer

This article explains how to efficiently load and view large PDF files using the Syncfusion Angular PDF Viewer. It includes recommended best practices and performance tips for documents ranging from **50 MB to 2 GB**.
This article explains how to efficiently load and view large PDF files using the Angular PDF Viewer. It includes recommended best practices and performance tips for documents ranging from **50 MB to 2 GB**.

## Why Large PDFs Need Special Handling

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Load a Password-Protected PDF in Angular

This article explains how to open password-protected PDF files in the Syncfusion Angular PDF Viewer. The viewer supports both user‑interactive loading (Open File dialog) and programmatic loading using APIs.
This article explains how to open password-protected PDF files in the Angular PDF Viewer. The viewer supports both user‑interactive loading (Open File dialog) and programmatic loading using APIs.

## 1. Opening a Password-Protected PDF Using the **Open File** Dialog

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Add Custom Data to PDF Form Fields in Angular PDF Viewer

The **Syncfusion Angular PDF Viewer** allows you to attach **custom application-specific data** to form fields by using the customData property. This enables you to associate business identifiers, tags, validation hints, or workflow metadata with form fields.
The **Angular PDF Viewer** allows you to attach **custom application-specific data** to form fields by using the customData property. This enables you to associate business identifiers, tags, validation hints, or workflow metadata with form fields.

The custom data remains linked to the form field throughout the viewer session and can be accessed or updated whenever the field is queried or modified.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# PDF Viewer Form Field Events in Angular

The Syncfusion Angular PDF Viewer provides a set of form field events that report changes associated with creating, selecting, modifying, moving, resizing, or removing form fields. These events supply metadata related to the affected field and are raised during user interaction or programmatic updates.
The Angular PDF Viewer provides a set of form field events that report changes associated with creating, selecting, modifying, moving, resizing, or removing form fields. These events supply metadata related to the affected field and are raised during user interaction or programmatic updates.

Validation‑related events are emitted when the viewer performs operations that require confirmation of field completion, such as print or download actions.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# PDF Form Handling Best Practices in Angular PDF Viewer

This guide provides a comprehensive overview of recommended practices for creating, organizing, validating, and automating PDF forms in the Syncfusion Angular PDF Viewer.
This guide provides a comprehensive overview of recommended practices for creating, organizing, validating, and automating PDF forms in the Angular PDF Viewer.

It explains how to structure field names, ensure consistency, apply validation rules, group related fields, and streamline workflows through pre-filling and data import/export. By following these guidelines, you can build clean, reliable, and efficient form experiences that are easier to maintain and work seamlessly across different use cases.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,8 @@ For detailed compatibility information, refer to the [Angular version support ma

For older Angular versions, refer to the respective Angular PDF Viewer guides.

N> Looking for the full Angular PDF Viewer component overview, features, pricing, and documentation? Visit the [Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) page.

## See also

- [Getting started Angular PDF Viewer](./getting-started)
Expand Down
Loading