Copy Required Assets

The PDF Web Viewer requires static assets (workers, fonts, translations, stamps) to be available to your Angular application.

Update angular.json to include these assets (works for both ng serve and ng build):

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/@avanquest/pdf-web-viewer/public",
                "output": ""
              }
            ]
          }
        }
      }
    }
  }
}
Copy

Note: This single entry copies all PDF Web Viewer assets (pwv-workers, pwv-fonts, pwv-i18n, pwv-stamps) to your application's output directory. The pwv- prefix avoids conflicts with your application's own assets.

Simple Example

import { Component, OnInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
import { PdfEditor } from '@avanquest/pdf-web-viewer';
import { environment } from '../../environments/environment';

@Component({
  selector: 'app-pdf-viewer-ui',
  template: `<div #pdfContainer style="width: 100%; height: 100vh;"></div>`,
  styles: [':host { display: block; width: 100%; height: 100%; }'],
})
export class PdfViewerUIComponent implements OnInit, OnDestroy {
  @ViewChild('pdfContainer', { static: true }) pdfContainer!: ElementRef;
  private editor: any;

  async ngOnInit() {
    try {
      this.editor = await PdfEditor({
        container: this.pdfContainer.nativeElement /* Provide container for UI */,
        license: environment.pdfLicenseKey || 'YOUR_LICENSE_KEY',
        /* workerPath and fontsPath are auto-detected */
      });

      /* Access the UI service if needed */
      const pdfWebService = this.editor.ui.pdfWebService;

      /* Optionally open a document programmatically */
      /* await pdfWebService.openDocument(fileObject); */
    } catch (error) {
      console.error('Failed to initialize PDF Editor:', error);
    }
  }

  ngOnDestroy() {
    /* Cleanup if needed */
  }
}
Copy