Get the Base 64 string of the loaded PDF document

4 Apr 20231 minute to read

The PDF Viewer library allows you to get the base 64 string of the loaded PDF document by using saveAsBlob() method. The entire PDF document will get as blob as like memory stream. So, we can save the blob or convert into stream and we can save it in the database. We can also load the PDF document from base 64 string using the load() method.

The following steps are used to get the base 64 string of the loaded PDF document in the PDF viewer control.

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

Step 2: Add the following code snippet to get the base 64 string with button click event.

<button (click)="base64ofloadedDocument()">base64Document</button>

base64ofloadedDocument() {
  var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
  viewer.saveAsBlob().then(function (value) {
    var data = value;
    var reader = new FileReader();
    reader.readAsDataURL(data);
    reader.onload = () => {
      var base64data = reader.result;
      // get base 64 string.
      console.log(base64data);
    };
  });

Step 3: Use the following code snippet inside the saveAsBlob() method to load the document from the base 64 string.

// load the document from base 64 string.
viewer.load(base64data, null);

Find the Sample, how to get the Base 64 string of the loaded PDF document

View sample in GitHub