Copy Required Assets

The PDF Web SDK 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 SDK assets (pwv-workers, pwv-fonts, pwv-i18n, pwv-stamps, pwv-cursors) 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',
        /* basePath defaults to the domain root; set it if the pwv-* folders are served elsewhere */
      });

      /* 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