Saving PDF file in Blazor SfPdfViewer Component

17 Jul 20265 minutes to read

After editing a PDF with annotations or form fields, the updated document can be saved to a server, persisted to a database, or downloaded to the local file system. Examples below illustrate common approaches and recommended practices.

Save PDF file to Server

Use this approach to persist the modified PDF to a server-side folder. Ensure the application has write permissions to the target directory.

@using Syncfusion.Blazor.SfPdfViewer
@using Syncfusion.Blazor.Buttons
@using System.IO

<SfButton OnClick="OnClick">Save</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath"
              @ref="viewer"
              Height="100%"
              Width="100%"></SfPdfViewer2>

@code {
    private SfPdfViewer2 viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    private async Task OnClick(MouseEventArgs args)
    {
        byte[] data = await viewer.GetDocumentAsync();
        //PDF document file stream
        Stream stream = new MemoryStream(data);
        await using (var fileStream = new FileStream(@"wwwroot/Data/PDF_Succinctly_Updated.pdf", FileMode.Create, FileAccess.Write))
        {
            //Saving the new file in root path of application
            await stream.CopyToAsync(fileStream);
        }
    }
}

NOTE

For production scenarios, prefer using statements for stream disposal, handle I/O exceptions, and validate input. Avoid writing files to wwwroot at runtime unless the behavior is intentional and secure.

Save PDF file to Database

Use this method to update PDF content stored in a relational database when documents are managed centrally and retrieved by name or identifier.

@using Syncfusion.Blazor.SfPdfViewer
@using Syncfusion.Blazor.Buttons
@using System.Data.SqlClient

<SfButton OnClick="OnClick">Save</SfButton>
<SfPdfViewer2 DocumentPath="@DocumentPath"
              @ref="viewer"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

@code{
    private SfPdfViewer2 viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    private async Task OnClick(MouseEventArgs args)
    {
        string documentName = "PDF_Succinctly";
        byte[] data = await viewer.GetDocumentAsync();
        string connectionString = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=D:\database.mdf;";
        string queryStmt = "Update PDFFiles SET Content = @Content where DocumentName = @DocumentName";
        using (SqlConnection con = new SqlConnection(connectionString))
        {
            using (SqlCommand cmd = new SqlCommand(queryStmt, con))
            {
                SqlParameter contentParam = cmd.Parameters.Add("@Content", System.Data.SqlDbType.VarBinary, -1);
                contentParam.Value = data;
                SqlParameter nameParam = cmd.Parameters.Add("@DocumentName", System.Data.SqlDbType.VarChar, 255);
                nameParam.Value = documentName;
                con.Open();
                cmd.ExecuteNonQuery();
            }
        }
    }
}

NOTE

Use parameterized queries for all user or variable input to prevent SQL injection. Wrap database operations with error handling, transactions, and appropriate connection disposal patterns.

Download

The SfPdfViewer includes a built-in toolbar button to download the loaded or modified PDF. Control this behavior with the EnableDownload property.

@using Syncfusion.Blazor.SfPdfViewer
<SfPdfViewer2 Width="100%"
              Height="100%"
              DocumentPath="@DocumentPath"
              EnableDownload="true" />
@code{
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
}

Blazor SfPdfViewer with Download Option

Programmatic download can also be triggered from a button click handler by calling DownloadAsync().

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SfPdfViewer

<SfButton OnClick="OnClick">Download</SfButton>
<SfPdfViewer2 Width="100%"
              Height="100%"
              DocumentPath="@DocumentPath"
              @ref="@Viewer" />

@code {
    private SfPdfViewer2 Viewer;
    private string DocumentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";
    private async Task OnClick(MouseEventArgs args)
    {
        await Viewer.DownloadAsync();
    }
}

Download file name

Use the DownloadFileName property to set the default file name for the downloaded PDF.

The following example shows how to specify a custom file name.

@using Syncfusion.Blazor.SfPdfViewer

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

@code
{
    //Sets the PDF document path for initial loading.
    private string documentPath { get; set; } = "wwwroot/Data/PDF_Succinctly.pdf";

    //Sets the name of the file to be downloaded.
    private string downloadFileName { get; set; } = "TOP-View_CutSheets.pdf";

}

View sample in GitHub.

Download PDF file as a copy

Use the built-in toolbar option or the programmatic API to download a separate copy of the PDF to the local file system.

@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SfPdfViewer

<SfButton OnClick="OnClick">Download</SfButton>
<SfPdfViewer2 @ref="@viewer"
              Height="100%"
              Width="100%"
              DocumentPath="@DocumentPath" />

@code{
    private SfPdfViewer2 viewer;
    private string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";
    private async Task OnClick(MouseEventArgs args)
    {
        await viewer.DownloadAsync();
    }
}

See also