Skip to footer content
USING IRONPDF

Create a PDF File with Blazor Tutorial

IronPDF, a renowned C# library, works with Blazor applications. This review will guide you through using IronPDF to embed a PDF report in a Blazor application, showcasing its seamless integration and effectiveness.

1. IronPDF Features

Developers can quickly create, read, and process a PDF document with the help of the robust IronPDF .NET PDF library. IronPDF has a built-in Chrome engine and offers a wealth of practical and potent capabilities. These include the ability to convert HTML5, JavaScript, CSS, and images to PDF, the ability to add unique headers and footers to PDF documents, and the ability to produce PDFs precisely as they appear in a web browser. IronPDF supports various web technologies, including HTML, ASPX, Razor Pages, and MVC frameworks.

IronPDF's key attributes are as follows:

  • IronPDF offers full control over the creation and modification of PDF files within .NET C# applications
  • IronPDF can generate PDF files of web pages from their URLs using specific User-Agent, Proxy, Header, and Cookie configurations.
  • IronPDF can generate PDF files for web pages located behind login forms using form variables
  • IronPDF can extract and/or remove photos from pre-existing PDF files
  • IronPDF can add text, photos, bookmarks, watermarks, and other elements to PDF documents
  • IronPDF makes it easy to merge and split pages of one or more PDF documents.
  • IronPDF can process web page assets such as JavaScript, CSS, and media files and render them into PDF documents just as they would appear in a browser.
  • IronPDF supports all .NET Frameworks, including .NET Core, .NET Standard, etc.

2. What is Blazor?

Blazor is a Web Application Framework that makes it feasible to create client-side Web Applications in C# and HTML using Web Assembly.

Web Assembly apps are sent to the browser in a binary instruction format that can operate at close-to-native speed. This has created new potential for languages like C# to run inside the browser.

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".

Create a PDF File with Blazor Tutorial, Figure 1: Creating a New Project in Visual Studio Creating a New Project in Visual Studio

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

Create a PDF File with Blazor Tutorial, Figure 2: Choosing the name and location of the new Blazor Application 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:

Create a PDF File with Blazor Tutorial, Figure 3: Creating a New Project in Visual Studio with the .NET 6.0 Framework 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. Install the IronPDF Library

The IronPDF Library can be downloaded and installed in four ways:

  • Using Visual Studio's NuGet Package Manager
  • Using Visual Studio's Command-Line
  • Downloading directly from the NuGet website
  • Downloading directly from the IronPDF website

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.

Create a PDF File with Blazor Tutorial, Figure 4: Accessing Visual Studio's 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:

Create a PDF File with Blazor Tutorial, Figure 5: Searching for the IronPDF library in the NuGet Package Manager GUI 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.

Create a PDF File with Blazor Tutorial, Figure 6: Installing the IronPDF library using the NuGet Package Manager Console 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}");
        }
    }
}
[using] ReadOnly Property code() As IronPdf
	''' <summary>
	''' This method exports data by converting a URL to a PDF file and initiating its download.
	''' </summary>
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	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(string.Format("Error in ExportData: {0}", ex.Message));
'		}
'	}
End Property
$vbLabelText   $csharpLabel

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>
HTML

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.

5. Create a PDF Document from an HTML String

The following snippet of code shows how to turn an HTML string into a document.

@using IronPdf

@code {
    /// <summary>
    /// Demonstrates turning an HTML string into a PDF document.
    /// </summary>
    public void GeneratePdfFromHtmlString()
    {
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderHtmlAsPdf("<h1>Hello world!!</h1>");

        // You can save the generated PDF locally
        pdf.SaveAs("HelloWorld.pdf");
    }
}
@using IronPdf

@code {
    /// <summary>
    /// Demonstrates turning an HTML string into a PDF document.
    /// </summary>
    public void GeneratePdfFromHtmlString()
    {
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderHtmlAsPdf("<h1>Hello world!!</h1>");

        // You can save the generated PDF locally
        pdf.SaveAs("HelloWorld.pdf");
    }
}
[using] ReadOnly Property code() As IronPdf
	''' <summary>
	''' Demonstrates turning an HTML string into a PDF document.
	''' </summary>
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	public void GeneratePdfFromHtmlString()
'	{
'		var renderer = New ChromePdfRenderer();
'		var pdf = renderer.RenderHtmlAsPdf("<h1>Hello world!!</h1>");
'
'		' You can save the generated PDF locally
'		pdf.SaveAs("HelloWorld.pdf");
'	}
End Property
$vbLabelText   $csharpLabel

The preceding example uses the RenderHtmlAsPdf instance method to transform any string of HTML into PDF content. Furthermore, the SaveAs method can be used in the procedures described previously to save this content on the client's computer.

Create a PDF File with Blazor Tutorial, Figure 7: The Blazor PDF Generation Application created in this tutorial The Blazor PDF Generation Application created in this tutorial

The screenshot above shows the Web Application that developed in this tutorial. Clicking on the Download button will trigger the C# code to produce the PDF content, and a JavaScript function to download the PDF content on the client-side.

Conclusion

This article demonstrated how to develop a Blazor Web Application that uses the IronPDF PDF library to generate PDF files from web pages.

IronPDF is not open source, however, a free trial key allows you to use it in production without watermarks.

Frequently Asked Questions

How can I integrate a PDF library with a Blazor server-side application?

You can integrate a PDF library with a Blazor server-side application by using IronPDF. First, create a Blazor project in Visual Studio, then install the IronPDF library through NuGet Package Manager or command-line. IronPDF allows you to generate PDF documents from HTML content seamlessly.

What methods are available for generating PDFs from HTML in a Blazor application?

In a Blazor application, you can use IronPDF's RenderUrlAsPdf method to convert web page URLs into PDFs, or RenderHtmlAsPdf to generate PDFs directly from HTML strings. These methods provide flexibility in creating PDF documents from various HTML sources.

How can I save a PDF file to the client's file system in a Blazor application?

To save a PDF file to the client's file system in a Blazor application, you can use a JavaScript function to convert the PDF data into a blob and trigger a download. IronPDF provides the necessary tools to generate the PDF, which can then be handled using client-side JavaScript.

What is the process for creating a Blazor server-side project in Visual Studio?

Creating a Blazor server-side project in Visual Studio involves selecting 'New Project' from the File menu, choosing 'Blazor Server App', specifying the project name and location, and selecting the appropriate .NET Framework version. This setup allows you to integrate additional libraries such as IronPDF for enhanced functionality.

Can I convert JavaScript and CSS content within HTML to PDF using this library?

Yes, you can convert JavaScript and CSS content within HTML to PDF using IronPDF. It supports rendering HTML5, CSS, and JavaScript content, allowing you to generate comprehensive PDF documents that maintain the layout and styling of the original web pages.

What are some troubleshooting steps if the PDF generation does not work as expected in Blazor?

If PDF generation does not work as expected in Blazor, ensure that the IronPDF library is correctly installed in the project. Verify that the HTML content is correctly formatted and accessible. Additionally, check for any JavaScript errors in the browser console that might affect the PDF rendering process.

How can I ensure my PDF documents include headers and footers when using a PDF library?

To include headers and footers in your PDF documents using IronPDF, you can configure the rendering options to add custom header and footer content. This allows you to include additional information such as page numbers or titles in the PDF output.

Is it possible to generate PDFs for pages behind authentication in a Blazor application?

Yes, IronPDF can generate PDFs for pages behind authentication in a Blazor application. You will need to manage authentication cookies or tokens to access the restricted content before converting it to a PDF using the library's capabilities.

Chipego
Software Engineer
Chipego has a natural skill for listening that helps him to comprehend customer issues, and offer intelligent solutions. He joined the Iron Software team in 2023, after studying a Bachelor of Science in Information Technology. IronPDF and IronOCR are the two products Chipego has been focusing on, but his knowledge of ...Read More