Load a PDF File from Blob Data in the PDFViewer

Environment

Product

Progress® Kendo UI® PDFViewer for Angular

Description

How can I display a PDF file from an object of Blob data type in the PDFViewer component?

Solution

The Binary Large Object (blob) format is not a supported data type for the PDFViewer component. To load a PDF file from a Blob data object in the PDFViewer, convert the Blob data to a Base64 string, as this is a supported format for the component.

1. Use the readAsDataURL() method of the FileReader interface to convert the Blob object that contains the PDF file to a Base64 format. Then, extract the Base64 string from the result and store it to a variable that will represent the data of the PDFViewer:

   ts

   public pdfSrc: string | null = null;
   
   public blobToBase64(blob: Blob): void {
       var reader = new FileReader();
       reader.readAsDataURL(blob);
       reader.onload = (e) => {
           //split the result to retrieve only the Base64 string
           this.pdfSrc = (e.target.result as string).split(",")[1];
       };
   }

2. Upon the successful fetching of the Blob data, pass the response object as a parameter to the configured conversion method:

   ts

   public fetchPdfFromUrl(): void {
       var request = new XMLHttpRequest();
       request.open('GET', "https://www.telerik.com/kendo-angular-ui-develop/components/demos/sample.pdf", true);
       request.responseType = 'blob';
       request.onload = () => {
           //pass the Blob response to the method
           this.blobToBase64(request.response);
       };
       request.send();
   }

3. Pass the variable, containing the converted Blob object, to the data property of the PDFViewer component:

   html

   <kendo-pdfviewer
       style="height: 600px;"
       [data]="pdfSrc">
   </kendo-pdfviewer>

See Also

• Kendo UI for Angular PDFViewer Documentation
• API Reference of the PDFViewer Component