View PDF files using PDF Viewer Component in the Blazor Server app

17 Apr 20242 minutes to read

In this section, we’ll guide you through the process of adding Syncfusion’s Blazor PDF Viewer (Next Gen) component to your Blazor Server app. We’ll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our GitHub repository.

Prerequisites

System requirements for Blazor components

Create a new Blazor App in Visual Studio

Create a new Blazor Server app and name it PDFViewerGettingStarted.

NOTE

The PDF Viewer (Next Gen) component is supported from .NET 6.0 onwards.

Install Blazor PDF Viewer NuGet package in Blazor Server App

Add the following NuGet packages into the Blazor Server app.

Register Syncfusion Blazor Service

In the ~/_Imports.razor file, add the following namespaces:

~/_Imports.razor

@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;

~/Program.cs
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMessageSize = 102400000; });

// Add Syncfusion Blazor service to the container.
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

Adding stylesheet and script

Add the following stylesheet and script to the head section of the ~/Pages/_Host.cshtml file.

CSHTML
<head>
    <!-- Syncfusion Blazor PDF Viewer (Next Gen) control's theme style sheet -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <!-- Syncfusion Blazor PDF Viewer (Next Gen) control's scripts -->
    <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
</head>

Adding Blazor PDF Viewer (Next Gen) Component

Add the Syncfusion PDF Viewer (Next Gen) component in the ~/Pages/Index.razor file

RAZOR
@page "/"

<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

NOTE

If you don’t provide the DocumentPath property value, the PDF Viewer (Next Gen) component will be rendered without loading the PDF document. Users can then use the open option from the toolbar to browse and open the PDF as required.

Run the application

Run the application, and the PDF file will be displayed using Syncfusion’s Blazor PDF Viewer (Next Gen) component in your browser.