Syncfusion AI Assistant

How can I help you?

Migrating from Apryse Web Viewer to Syncfusion Angular PDF Viewer

13 Apr 20266 minutes to read

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.

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.

Key migration benefits:

  • Native Angular component integration
  • Simplified life cycle management
  • Modular feature injection (smaller bundles)
  • Built-in toolbar and UI consistency

Architecture Differences

Concept Apryse Web Viewer Syncfusion Angular PDF Viewer
Integration style Imperative DOM-based SDK mount Declarative Angular component
Initialization Web Viewer({…}, element) <ejs-pdfviewer> component
UI SDK-provided toolbar Angular services & toolbar module
Events documentViewer.addEventListener Angular event bindings
Annotations AnnotationManager Built-in annotation module

Migration generally involves removing the Apryse SDK mount and replacing it with the ejs-pdfviewer Angular component.

Installation

Apryse Web Viewer

npm install @pdftron/webviewer

Syncfusion Angular PDF Viewer

npm install @syncfusion/ej2-angular-pdfviewer

Module Setup

AppModule Configuration (Syncfusion)

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PdfViewerModule } from '@syncfusion/ej2-angular-pdfviewer';

@NgModule({
  imports: [BrowserModule, PdfViewerModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Add the required Syncfusion styles in angular.json or 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-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-pdfviewer/styles/material.css';

Viewer Initialization Comparison

Apryse Web Viewer (Angular)

import WebViewer from '@pdftron/webviewer';

ngAfterViewInit() {
  WebViewer(
    {
      path: 'lib/webviewer',
      initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
    },
    this.viewer.nativeElement
  ).then(instance => {
    const { documentViewer } = instance.Core;
    documentViewer.addEventListener('documentLoaded', () => {
      console.log('Document loaded');
    });
  });
}

Syncfusion Angular PDF Viewer

<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]='https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
  [resourceUrl]='https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib'
  (documentLoad)="onDocumentLoad()">
</ejs-pdfviewer>
onDocumentLoad(): void {
  console.log('Document loaded');
}

Feature Mapping

Feature Apryse Syncfusion Angular
Page navigation documentViewer APIs Built-in navigation module
Text search Search APIs enableTextSearch
Annotations annotationManager Annotation service
Form fields FormsManager FormFields module
Download / Print SDK methods download() / Print module

Event Handling

Apryse

documentViewer.addEventListener('pageNumberUpdated', (page) => {
  console.log(page);
});

Syncfusion

<ejs-pdfviewer (pageChange)="pageChange($event)"></ejs-pdfviewer>
pageChange(args: any): void {
  console.log(args.currentPageNumber);
}

Annotation Migration

Apryse

annotationManager.exportAnnotations();

Syncfusion

this.pdfViewer.exportAnnotation();

For importing persisted annotations:

this.pdfViewer.importAnnotation(annotationData);

Migration Checklist

  • Remove Apryse web viewer initialization and DOM mounting code
  • Install @syncfusion/ej2-angular-pdfviewer
  • Import PdfViewerModule into Angular modules
  • Replace SDK initialization with <ejs-pdfviewer>
  • Inject only required services (Toolbar, Annotation, FormFields, TextSearch)
  • Map Apryse events to Angular PDF Viewer events
  • Adapt annotation and form-field persistence logic
  • Update licensing and deployment setup

Quick Migration Guide

  1. Create a migration branch
  2. Remove Apryse WebViewer SDK usage
  3. Install Syncfusion 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
  7. Test large PDFs and annotation persistence

Reference: key Syncfusion PdfViewerComponent methods & events

See Also