HelpBot Assistant

How can I help you?

Migration from PDF Viewer (Classic) to SfPdfViewer

13 Oct 20255 minutes to read

Why PDF Viewer (Classic) to PDF Viewer control

Migrating to the PDF Viewer control delivers better performance and a simplified deployment model. Scrolling, page navigation, and printing are optimized for a smoother user experience. The newer viewer also removes the WebAssembly server service dependency required by the classic control, reducing app complexity and maintenance.

  • Enhanced performance:
    Experience faster scrolling, more responsive page navigation, and improved printing throughput for large documents.

  • No server service dependency:
    The newer viewer does not require a separate ServiceUrl or server-side WebAssembly service; client-side rendering is handled by the component.

  • Unified package across platforms:
    A single package supports Windows, macOS, and Linux, making installation consistent across environments.

Nuget Package

To initialize the PDF Viewer component, add the following package references to the project .csproj file.

PDF Viewer (Classic) 
<ItemGroup>

	<!-- If you are using a Web Assembly application, include the following line in the .csproj file -->
	<PackageReference Include="Syncfusion.Blazor.PdfViewer"/>

    <!-- If you are using a Server Assembly application, include the following line in the .csproj file -->
	<!--<PackageReference Include="Syncfusion.Blazor.PdfViewerServer"/>-->
		
</ItemGroup>
PDF Viewer 
<ItemGroup>
    <PackageReference Include="Syncfusion.Blazor.SfPdfViewer"/>
</ItemGroup>

Script File

To use the PDF Viewer component, add the corresponding script reference in the app host page (Host.cshtml or Layout.cshtml) based on the framework version.

NOTE

The same script file is used for both Server application and Web assembly application for the PDF Viewer component.

PDF Viewer (Classic) 
<head>
    <!-- Syncfusion Blazor PDF Viewer controls theme style sheet -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
    <!-- Syncfusion Blazor PDF Viewer controls scripts -->
    <script src="_content/Syncfusion.Blazor.PdfViewer/scripts/syncfusion-blazor-pdfviewer.min.js" type="text/javascript"></script>
</body>
PDF Viewer 
<head>
    <!-- Syncfusion Blazor SfPdfViewer controls theme style sheet -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
    <!-- Syncfusion Blazor SfPdfViewer controls scripts -->
    <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
</body>

Program.cs

Add the following to the Program.cs file to register Syncfusion Blazor services. For WebAssembly apps, enable in-memory caching as shown in the comment.

PDF Viewer (Classic) 
builder.Services.AddSyncfusionBlazor();
PDF Viewer 
builder.Services.AddSyncfusionBlazor();

// If you are using a WebAssembly application, include the following line in the Program.cs file
// builder.Services.AddMemoryCache();

Index.razor

To render the PDF Viewer component, add the following code in the Index.razor file. In the newer viewer, a ServiceUrl is not required; specify only the DocumentPath and layout attributes.

PDF Viewer (Classic) 
@* If you are using a Web Assembly application, include the following line in the Index.razor file*@
<SfPdfViewer DocumentPath="PDF_Succinctly.pdf" ServiceUrl="api/pdfviewer" Height="100%" Width="100%"></SfPdfViewer>

@* If you are using a Server Assembly application, include the following line in the Index.razor file
<SfPdfViewerServer DocumentPath="PDF_Succinctly.pdf" Height="100%" Width="100%"></SfPdfViewerServer>*@
PDF Viewer 
<SfPdfViewer2 DocumentPath="PDF_Succinctly.pdf" Height="100%" Width="100%"></SfPdfViewer2>

Project.cs

For WebAssembly applications, include the following properties in the project .csproj file to ensure proper functionality and compatibility.

PDF Viewer 
<ItemGroup>
    <NativeFileReference Include="$(SkiaSharpStaticLibraryPath)\2.0.23\*.a" />
</ItemGroup>

<PropertyGroup>
	<WasmNativeStrip>true</WasmNativeStrip>
	<WasmBuildNative>true</WasmBuildNative>
</PropertyGroup>

NOTE

For WebAssembly applications, install the SkiaSharp.NativeAssets.WebAssembly NuGet package.

NOTE

When hosting in certain environments (for example, Azure App Service), use SkiaSharp.Views.Blazor instead of SkiaSharp.NativeAssets.WebAssembly. Align native asset versions in the project file with the installed package version.

See also