How to Load Documents Dynamically in Angular PDF Viewer

14 Aug 20261 minute to read

The PDF Viewer supports loading or switching PDF documents at runtime after the initial viewer initialization. Use the load method to open a document from a URL or a Base64 string.

The following steps show common approaches for loading documents dynamically.

Step 1: Follow the getting started guide to create a basic Angular PDF Viewer sample: Angular PDF Viewer getting started

Step 2: Use the following code snippet to load the document from a Base64 string.

<button (click)="load_1()">LoadDocumentFromBase64</button>

load_1() {
  var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
  viewer.load(
    "data:application/pdf;base64,.....",
    null
  );
}

Step 3: Use the following code snippet to load a PDF document from a URL (document name).

<button (click)="load_2()">LoadDocumentFromBase64</button>

load_2() {
  // Load PDF document using file name
  var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
  viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
}

Find the Sample, how to load the PDF document dynamically

View sample in GitHub