Search results

Get the Base64 string of the loaded PDF document in Angular PDF Viewer component

03 Dec 2021 / 2 minutes 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.

Copied to clipboard
<button (click)="base64ofloadedDocument()">base64Document</button>
Copied to clipboard
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.

Copied to clipboard
// 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