Open and save PDF document in Blazor

The Syncfusion^® Blazor PDF library is used to create, read, and edit PDF documents programmatically without the dependency of Adobe Acrobat. Using this library, you can open and save PDF document in ASP.NET Core.

Prerequisites:

Visual Studio 2019 Preview
Install the .NET Core SDK 3.1 Preview

Creating a Blazor project

Enable Visual Studio to use preview SDKs.
Open Tools > Options in the menu bar.
Open the Projects and Solutions node. Open the .NET Core tab.
Check the box for Use previews of the .NET Core SDK and click OK.
Restart the Visual Studio 2019.

Server app

Step 1: Create a new C# Blazor server-side application project. Select Blazor Web App from the template and click the Next button.
Blazor sample creation

Step 2: In the Interactive Render Mode section, choose Server as the render mode. Then, click the Create button to generate a new Blazor Server-Side Application.
Blazor server app

Step 3: To open and save a PDF document in Blazor Server app, install Syncfusion.Pdf.Net.Core to the Blazor project.
Install NuGet package

NOTE

Starting with v16.2.0.x, if you reference Syncfusion^® assemblies from trial setup or from the NuGet feed, you also have to add “Syncfusion.Licensing” assembly reference and include a license key in your projects. Please refer to this link to know about registering Syncfusion^® license key in your application to use our components.

Step 4: Inject ExportService into FetchData.razor using the following code.

C#
@inject ExportService service
@inject Microsoft.JSInterop.IJSRuntime JS
@using System.IO

Step 5: Create a button in the FetchData.razor using the following code.

CSHTML
<button class="btn btn-primary" @onclick="@LoadAndSave">Load and save PDF document</button>

Step 6: Add the LoadAndSavePDF method in FetchData.razor page to call the export service.

C#
protected async Task LoadAndSave()
{
    using (MemoryStream memoryStream = ExportService.LoadAndSavePDF(forecasts))
    {
        await JS.SaveAs("Sample.pdf", memoryStream.ToArray());
    }
}

Step 7: Create a new cs file named ExportService under Data folder and include the following namespaces in the file.

C#
using Syncfusion.Pdf;
using Syncfusion.Pdf.Graphics;
using Syncfusion.Pdf.Grid;
using Syncfusion.Drawing;
using Syncfusion.Pdf.Parsing;
using System.IO;

Step 8: Register your service in the ConfigureServices method available in the Startup.cs class as follows.

C#
public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<WeatherForecastService>();
    services.AddSingleton<ExportService>();
}

Step 9: Create a new MemoryStream method with name as LoadAndSavePDF in ExportService class and include the following code snippet to open an existing PDF document in Blazor Server app.

C#
public static MemoryStream LoadAndSavePDF()
{
    //Open an existing PDF document
    FileStream fileStream = new FileStream("Input.pdf", System.IO.FileMode.Open, System.IO.FileAccess.Read);
    PdfLoadedDocument document = new PdfLoadedDocument(fileStream);    
}

Step 10: Add below code example to add a table in PDF document.

C#
//Create a PdfGrid
PdfGrid pdfGrid = new PdfGrid();
//Add values to the list
List<object> data = new List<object>();
Object row1 = new { Product_ID = "1001", Product_Name = "Bicycle", Price = "10,000" };
Object row2 = new { Product_ID = "1002", Product_Name = "Head Light", Price = "3,000" };
Object row3 = new { Product_ID = "1003", Product_Name = "Break wire", Price = "1,500" };
data.Add(row1);
data.Add(row2);
data.Add(row3);
//Add list to IEnumerable
IEnumerable<object> dataTable = data;
//Assign data source
pdfGrid.DataSource = dataTable;
//Apply built-in table style
pdfGrid.ApplyBuiltinStyle(PdfGridBuiltinStyle.GridTable4Accent3);
//Draw the grid to the page of PDF document
pdfGrid.Draw(graphics, new RectangleF(40, 400, loadedPage.Size.Width - 80, 0));

Step 11: Add the below code example to save the PDF document in Blazor server application.

C#
//Create memory stream. 
using (MemoryStream stream = new MemoryStream())
{
    //Saving the PDF document into the stream
    document.Save(stream);
    //Closing the PDF document
    document.Close(true);
}

Step 12: Create a class file with FileUtil name and add the following code to invoke the JavaScript action to download the file in the browser.

C#
public static class FileUtil
{
    public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
   => js.InvokeAsync<object>(
       "saveAsFile",
       filename,
       Convert.ToBase64String(data));
}

Step 13: Add the following JavaScript function in the _Host.cshtml available under the Pages folder.

HTML
<script type="text/javascript">
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            //Download document in Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

You can download a complete working sample from GitHub.

By executing the program, you will get the PDF document as follows.
Blazor Server output PDF document

Click here to explore the rich set of Syncfusion^® PDF library features.

WASM app

Step 1: Create a new C# Blazor server-side application project. Select Blazor Web App from the template and click the Next button.
Blazor sample creation

Step 2: In the Interactive Render Mode section, choose WebAssembly as the render mode. Then, click the Create button to generate a new Blazor client-Side Application.
Select Blazor WASM app

Step 3: Install the Syncfusion.PDF.Net.Core NuGet package as a reference to your Blazor application from NuGet.org.
NuGet package installation

Step 4: Next, include the following namespaces in that FetchData.razor file.

C#
@using Syncfusion.Pdf 
@using Syncfusion.Pdf.Grid
@using Syncfusion.Pdf.Graphics
@using Syncfusion.Drawing
@using Syncfusion.Pdf.Parsing

Step 5: Create a button in the FetchData.razor using the following code.

CSHTML
<button class="btn btn-primary" @onclick="@LoadAndSavePDF">Export to PDF</button>

Step 6: Create a new async method with name as LoadAndSavePDF and include the following code snippet to open an existing PDF document in Blazor WASM app.

C#
@functions {
    public async void LoadAndSavePDF()
    {
        //Load an existing PDF document.
        PdfLoadedDocument document = new PdfLoadedDocument(inputstream);
    }
}

Step 7: Add the below code example to add table in the PDF document.

C#
//Create a PdfGrid
PdfGrid pdfGrid = new PdfGrid();
//Add values to the list
List<object> data = new List<object>();
Object row1 = new { Product_ID = "1001", Product_Name = "Bicycle", Price = "10,000" };
Object row2 = new { Product_ID = "1002", Product_Name = "Head Light", Price = "3,000" };
Object row3 = new { Product_ID = "1003", Product_Name = "Break wire", Price = "1,500" };
data.Add(row1);
data.Add(row2);
data.Add(row3);
//Add list to IEnumerable
IEnumerable<object> dataTable = data;
//Assign data source
pdfGrid.DataSource = dataTable;
//Apply built-in table style
pdfGrid.ApplyBuiltinStyle(PdfGridBuiltinStyle.GridTable4Accent3);
//Draw the grid to the page of PDF document
pdfGrid.Draw(graphics, new RectangleF(40, 400, loadedPage.Size.Width - 80, 0));

Step 8: Add below code example to save the PDF document in Blazor.

C#
//Save the PDF document.
MemoryStream memoryStream = new MemoryStream();
document.Save(memoryStream);
//Close the document.
document.Close();
//Download the PDF document
await JS.SaveAs("Sample.pdf", memoryStream.ToArray());

Step 9: Create a class file with FileUtil name and add the following code to invoke the JavaScript action to download the file in the browser.

C#
public static class FileUtil
{
    public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
  => js.InvokeAsync<object>(
      "saveAsFile",
      filename,
      Convert.ToBase64String(data));
}

Step 10: Add the following JavaScript function in the index.html available under the wwwroot folder.

HTML
<script type="text/javascript">
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            //Download document in Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

You can download a complete working sample from GitHub.

By executing the program, you will get the PDF document as follows.
Blazor WASM output Word document

NOTE

Even though PDF library works in WASM app, it is recommended to use server deployment. Since the WASM app deployment increases the application payload size.

Kindly explore the supported and unsupported features of PDF library in Blazor.