Syncfusion AI Assistant

How can I help you?

Save PDF to Azure Blob Storage in Blazor SfPdfViewer

12 Feb 20263 minutes to read

Follow these steps to save a PDF from the SfPdfViewer to Azure Blob Storage.

Step 1: Create the Azure Blob Storage account

Sign in to the Azure portal and create a Storage account with the desired configuration. Record the connection string during setup. Within the Storage account, create a Blob container. For detailed guidance, see Create a Storage account and container in the Azure portal.

Step 2: Create a Simple SfPdfViewer Sample in Blazor

Create a basic Blazor Web App Server application that hosts the SfPdfViewer component by following Getting started with Blazor SfPdfViewer. This provides the baseline configuration required for the viewer.

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

  1. 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.Buttons;
@using Syncfusion.Blazor.SfPdfViewer;

Step 4: Add the below code example to save the downloaded PDF files to Azure Blob Storage container

@page "/"
<SfButton @onclick="OnClick">Save file to Azure Blob Storage</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath"
              @ref="viewer"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

@code {
    private string DocumentPath { get; set; }
    private SfPdfViewer2 viewer;
    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";

    public async void OnClick(MouseEventArgs args)
    {
        byte[] data = await viewer.GetDocumentAsync();

        BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString);

        BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(containerName);

        string result = Path.GetFileNameWithoutExtension(fileName);

        // Get a reference to the blob
        BlobClient blobClient = containerClient.GetBlobClient(result + "_downloaded.pdf");

        using (MemoryStream stream = new MemoryStream(data))
        {
            blobClient.Upload(stream, true);
        }
    }
}

NOTE

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

NOTE

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

View the sample on GitHub.

See also