Blazor PDF Viewer Tutorial

Introduction

Adobe developed the file format known as Portable Document Format, or PDF. PDFs are a useful format to use when publishing papers that require the text and visuals to be formatted.

Document creation and invoicing are just two of the critical uses that PDFs provide in modern culture. The PDF libraries that are presently available on the market have made the creation of PDFs nearly automatic. Prior to selecting a PDF library to use for your project, it is critical to evaluate the characteristics of each one.

In this tutorial, we'll build a Blazor server-side application that will use IronPDF to display a PDF document for online users.

1. IronPDF Features

With the help of the powerful IronPDF PDF .NET library, developers can easily create, read, and modify a PDF document. Based on the Chrome rendering engine, IronPDF includes a wide range of useful and powerful features, such as the ability to convert HTML5, JavaScript, CSS, and images to PDFs, the ability to add custom headers and footers to PDFs, and the ability to create PDFs that exactly match how they appear in a web browser.

IronPDF supports a number of web technologies, including HTML, ASPX, Razor View, and MVC. The following are IronPDF's main characteristics:

  • IronPDF offers us command over the generation of PDF files, allowing us to write .NET C# programs that can create, read, and edit PDF files
  • IronPDF can generate PDFs from a website's URL, and can be configured to accept specific form input, user-agents, login credentials, cookies, proxy, header configurations
  • IronPDF can delete images from existing PDF documents
  • IronPDF can add text, images, bookmarks, watermarks, and other components to PDF documents
  • IronPDF has multiple functions that allow us to merge and split one or more PDF documents easily
  • IronPDF can understand and render web media assets such as CSS and JavaScript
  • IronPDF supports various .NET desktop and MVC web application frameworks, including ASP.NET and Blazor

2. What is Blazor?

Blazor is an experimental 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 is able to 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".

Viewing PDFs in Blazor using IronPDF, Figure 1: Creating a New Project in Visual Studio

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

Viewing PDFs in Blazor using IronPDF, Figure 2: Creating a New Project in Visual Studio

Also, select the desired .NET Framework. In this tutorial, we will use .NET 6.0

Viewing PDFs in Blazor using IronPDF, Figure 3: Choosing the .NET 6.0 Framework for the New Blazor Server App

Microsoft Visual Studio will now generate the structure for our new Blazor Server App. This project will include a collection of .razor files, in which we can enter source code.

We will now add the IronPDF library to our 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.

Viewing PDFs in Blazor using IronPDF, Figure 4: 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:

Viewing PDFs in Blazor using IronPDF, Figure 5: Searching for the IronPDF library in the NuGet Package Manager GUI

In the image above we see the list of the related search results. Select the required options in order 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 be installed in the current project.

Viewing PDFs in Blazor using IronPDF, Figure 6: 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 https://www.nuget.org/packages/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

Click this link to download the latest package directly from our website.

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

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

4. View PDF documents with the Blazor server app

The Blazor application that we will be building in this tutorial will create a PDF document from a web page's URL and render it into a client's web browser.

With IronPDF, viewing a PDF is simple.

Add the following source code to the corresponding.razor file.

string _imgUrl="";
private async Task ViewFile()
{
    var Renderer = new IronPdf.ChromePdfRenderer();
    var pdf = Renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");
    _imgUrl = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.Stream.ToArray())}";
}
string _imgUrl="";
private async Task ViewFile()
{
    var Renderer = new IronPdf.ChromePdfRenderer();
    var pdf = Renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");
    _imgUrl = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.Stream.ToArray())}";
}
Private _imgUrl As String=""
Private Async Function ViewFile() As Task
	Dim Renderer = New IronPdf.ChromePdfRenderer()
	Dim pdf = Renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata")
	_imgUrl = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.Stream.ToArray())}"
End Function
VB   C#

The code snippet above first uses IronPDF's RenderUrlAsPdf method, which downloads the HTML content from a given URL and converts it into a PDF format. Afterwards, the code snippet renders the generated PDF content as a string of raw Base-64 data and stores it in a local variable.

For convenience, applications can use IronPDF's SaveAs method (available on any ChromePdfRenderer instance) to save generated PDF documents on the server's file system for quick access later.

The next segment of code prepares the base-64 PDF data for output onto the client's browser.

@if (_imgUrl != string.Empty)
{
    <iframe src="@_imgUrl" style="width:750px;height:750px;" type="application/pdf"/>
}
@if (_imgUrl != string.Empty)
{
    <iframe src="@_imgUrl" style="width:750px;height:750px;" type="application/pdf"/>
}
'INSTANT VB WARNING: The following constructor is declared outside of its associated class:
'ORIGINAL LINE: if(_imgUrl != string.Empty)
Private Sub New(Optional _imgUrl (Not ByVal) As = String.Empty)
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <iframe src="@_imgUrl" style="width:750px;height:750px;" type="application/pdf"/>
	"width:750px;height:750px;" type="application/pdf"/>
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <iframe src="@_imgUrl" style="width:750px;height:750px;" type
	"@_imgUrl" style="width:750px;height:750px;" type
	<iframe src="@_imgUrl" style
End Sub
VB   C#

The function above receives the Base64 data from the Blazor server-side, binding it to an iframe element's src attribute. On page-load, this triggers browsers to use their built-in webviewers to render the Base64 content as a proper PDF document.

Below is a screenshot of the PDF file when rendered from the Base64 string.

Viewing PDFs in Blazor using IronPDF, Figure 7: Viewing a PDF Generated in a Blazor app in the browser. This PDF has been created by IronPDF and sent to the browser as a Base64 string.

View a PDF Document from an HTML String

Below is an illustration of how IronPDF can create a PDF file from a string of HTML tags.

var Renderer = new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<h1>Hello world!!</h1>")
var Renderer = new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<h1>Hello world!!</h1>")
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'var Renderer = New IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<h1>Hello world!!</h1>")
VB   C#

The generated PDF document can be viewed from a client's browser using the procedure detailed in the previous section.

Conclusion

In this article, we have developed a Blazor web application that uses the IronPDf PDF library to generate a PDF file from a web page and display it in a user's browser.

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