Create a PDF File with Blazor Tutorial

Creating a New Project in Visual Studio

To begin, open the Microsoft Visual Studio application and select "New Project" from the File menu. Then, select "Blazor Server App".

Creating a New Project in Visual Studio

Enter a project name and select a file path. Then, click the Create button.

Choosing the name and location of the new Blazor Application

Select the desired .NET Framework (we will use .NET 6.0 in this tutorial), as shown in the screenshot below:

Creating a New Project in Visual Studio with the .NET 6.0 Framework

Microsoft Visual Studio will now generate the structure for this Blazor application.

Next, add the IronPDF library to this new project.

3.1 Using Visual Studio's NuGet Package Manager

Visual Studio provides the NuGet Package Manager to assist in installing libraries directly into projects. The screenshot below shows how to open the NuGet Package Manager.

Accessing Visual Studio's NuGet Package Manager

Use the search field under the Browse tab to search for "IronPDF", as shown in the screenshot below:

Searching for the IronPDF library in the NuGet Package Manager GUI

In the image above, it shows the list of the related search results. Select the required options to install the package into your project.

3.2 Using Visual Studio Command-Line

In Visual Studio, go to Tools > NuGet Package Manager > Package Manager Console

Enter the following line into the Package Manager Console tab:

Install-Package IronPdf

The package will now be downloaded and installed in the current project.

Installing the IronPDF library using the NuGet Package Manager Console

3.3 Downloading Directly from the NuGet Website

The third way to install the IronPDF library is to download the NuGet package directly from the website.

Navigate to NuGet website for IronPDF.

• Click the "Download Package" option from the menu on the right-hand side.
• Open the downloaded package on your file system. It will be installed automatically.
• Reload the solution and start using it in your project.

3.4 Downloading Directly from the IronPDF Website

Visit the IronPDF website to download the IronPDF package directly.

After downloading, follow these steps to add the package to your project:

• Right-click the project from the solution window.
• Select the option "Add" > "Reference" and then navigate to the location of the library that you downloaded previously.
• Click OK to add the library as a reference.

4. Create PDF documents in the Blazor Server App

The Blazor app in this tutorial will use IronPDF to fetch a web page's HTML content by its URL and convert it into a PDF document.

Enter the following source code in the .razor file contained in the project.

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

The code snippet above uses two methods to generate PDF documents from HTML. The first one is IronPDF's RenderUrlAsPdf method, which downloads the HTML content from a given URL and converts it into a PDF format.

The second method is the static JSRuntime.InvokeVoidAsync method, which triggers a browser's JavaScript engine to invoke a JavaScript function within the scope of the web page that saves the PDF content to a file on the client's file system.

This JavaScript function is included below:

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft 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);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        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>

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft 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);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        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>

The JavaScript function above receives the Base64 data from Blazor and converts it into a blob before saving it to the client-side location.

Alternatively, The SaveAs method from the ChromePdfRenderer class can also be used to save PDF documents to the browser's local storage.