Migrating from Apryse Web Viewer to Angular PDF Viewer

26 Jul 20265 minutes to read

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

Overview

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

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 WebViewer 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 WebViewer

npm install @pdftron/webviewer

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 WebViewer (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');
    });
  });
}

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 WebViewer 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 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