Load PDF Viewer with Local Resources in Angular

24 Apr 20263 minutes to read

This guide shows how to configure the Angular PDF Viewer (Standalone) to load PDF documents and required PDFium resources from your local application instead of using a CDN.

Note: Local resource loading is supported only in standalone mode. Do not use this approach with the server-backed PDF Viewer.

Prerequisites

Follow the getting started guide to create a basic Angular PDF Viewer application.

Configuration Steps

Step 1: Copy the Resource Files

Copy the ej2-pdfviewer-lib folder into the Angular src/assets/ directory using the following commands:

Windows

xcopy /E /I xcopy /E /I node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib public\assets\ej2-pdfviewer-lib

Mac/Linux

cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib public/assets/ej2-pdfviewer-lib

Step 2: Add Your PDF Document

Place your PDF file inside the src/assets/ folder.

Your folder structure:

src/
 └── assets/
     ├── ej2-pdfviewer-lib/
     │   ├── pdfium.js
     │   └── pdfium.wasm
     └── pdfsuccinctly.pdf

Step 3: Update the PDF Viewer Component

Configure the Angular PDF Viewer to use local paths.

import { Component } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
         MagnificationService, ThumbnailViewService, ToolbarService,
         NavigationService, TextSearchService, TextSelectionService,
         PrintService, FormDesignerService, FormFieldsService,
         AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               TextSearchService, TextSelectionService, PrintService,
               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
  template: `
    <ejs-pdfviewer
      id="pdfViewer"
      // Path to your locally hosted PDF file
      [documentPath]="documentPath"
      // Path to the locally hosted PDFium resource files
      [resourceUrl]="resourceUrl"
      style="height: 640px; display: block">
    </ejs-pdfviewer>
  `
})
export class AppComponent {

  public documentPath: string = window.location.origin + '/assets/pdfsuccinctly.pdf';

  public resourceUrl: string = window.location.origin + '/assets/ej2-pdfviewer-lib';
}

Step 5: Run the Application

Run the Angular application:

ng serve --open

The PDF Viewer will now load the document and resources from local assets.

View sample on GitHub