Open PDF file from Azure Blob Storage

6 Jun 20242 minutes to read

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

Step 1: Create the Azure Blob Storage account

Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this link.

Step 2: Create a Simple SfPdfViewer Sample in blazor

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

Step 3: Include the following namespaces in the Index.razor file.

Import the required namespaces at the top of the file:

@using System.IO;
@using Azure.Storage.Blobs;
@using Azure.Storage.Blobs.Specialized;
@using Syncfusion.Blazor.SfPdfViewer;

Step 4: Add the below code example to load a PDF from Azure blob storage container.

@page "/"

<SfPdfViewer2 DocumentPath="@DocumentPath"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

@code {
    private string DocumentPath { get; set; }

    private readonly string connectionString = "Your Connection string from Azure";
    private readonly string containerName = "Your container name in Azure";
    private readonly string fileName = "File Name to be loaded into Syncfusion SfPdfViewer";
	
    protected override void OnInitialized()
    {
        //Connection String of Storage Account
        BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString);
        BlobContainerClient blobContainerClient = blobServiceClient.GetBlobContainerClient(containerName);
        BlockBlobClient blockBlobClient = blobContainerClient.GetBlockBlobClient(fileName);
        MemoryStream memoryStream = new MemoryStream();
        blockBlobClient.DownloadTo(memoryStream);
        DocumentPath = "data:application/pdf;base64," + Convert.ToBase64String(memoryStream.ToArray());
    }
}

NOTE

Replace Your Connection string from Azure with the actual connection string for your Azure Blob Storage account, File Name to be Loaded into Syncfusion SfPdfViewer with the file name to load from the Azure container to the SfPdfViewer, and Your container name in Azure with the actual container name.

NOTE

The Azure.Storage.Blobs NuGet package must be installed in your application to use the previous code example.

View sample in GitHub.

Open PDF file from Azure Blob Storage

See also