Search results

Load PDF documents dynamically in Angular PDF Viewer component

03 Dec 2021 / 1 minute to read

The PDF Viewer library allows to switch or load the PDF documents dynamically after the initial load operation. To achieve this, load the PDF document as a base64 string or file name in PDF Viewer control using the Load() method dynamically.

The following steps are used to load the PDF document dynamically.

Step 1: Follow the steps provided in the link to create a simple PDF Viewer sample in Angular.

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

Copied to clipboard
<button (click)="load_1()">LoadDocumentFromBase64</button>
Copied to clipboard
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 PDF document using document name.

Copied to clipboard
<button (click)="load_2()">LoadDocumentFromBase64</button>
Copied to clipboard
 load_2() {
    // Load PDF document using file name
    var viewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];
    viewer.load('PDF_Succinctly.pdf', null);
  }

Find the Sample, how to load the PDF document dynamically