Open PDF file from Azure Blob Storage

Currently, it’s possible to load a PDF file from Azure Blob Storage into a PDF Viewer using either the Standalone or Server-backend PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from Azure Blob Storage.

Open PDF file from Azure Blob Storage using Standalone PDF Viewer

To load a PDF file from Azure Blob Storage in a PDF Viewer, you can follow the steps below

Step 1: Create a Simple PDF Viewer Sample in Angular

Start by following the steps provided in this link to create a simple PDF viewer sample in Angular. This will give you a basic setup of the PDF viewer component.

Step 2: Modify the src/app/app.component.ts File in the Angular Project

Add the following private properties to the AppComponent class, and assign the values from the configuration to the corresponding properties

NOTE

Replace Your account name in Azure with the actual account name for your Azure Blob Storage account and Your container name in Azure with the actual container name and Your Blob name in Azure with the actual container name.

private accountName: string = "*Your account name in Azure*";
private containerName: string = "*Your container name in Azure*";
private blobName: string = "*Your Blob name in Azure*";

Constructs the URL to the PDF in Azure Blob Storage. Calls fetchAndConvertToBase64 to fetch the PDF and convert it to a base64 string. Then Loads the base64 string into the PDF Viewer.

LoadPdfFromBlob() {
  const url = 'https://'+this.accountName+'.blob.core.windows.net/'+this.containerName+'/'+this.blobName;
  this.fetchAndConvertToBase64(url).then(base64String => {
    if (base64String) {
        var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
        setTimeout(() => {
          viewer.load("data:application/pdf;base64,"+base64String);
        }, 2000);
    } else {
        console.error('Failed to fetch and convert file to base64.');
    }
  }).catch(error => console.error('Error:', error));
}

Then it retrieves the PDF file from the given URL and converts the fetched Blob to a base64 string using blobToBase64.

async fetchAndConvertToBase64(url: string): Promise<string | null> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const blob = await response.blob();
    const base64String = await this.blobToBase64(blob);
    return base64String;
  } catch (error) {
    console.error('Error fetching file:', error);
    return null;
  }
}

Uses FileReader to convert a Blob to a base64 string. Resolves the promise with the base64 string or rejects it in case of an error.

blobToBase64(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
        const base64String = reader.result?.toString().split(',')[1] || '';
        resolve(base64String);
    };
    reader.onerror = error => reject(error);
    reader.readAsDataURL(blob);
  });
}

View sample in GitHub.