Migration from PDF Viewer (Classic) to PDF Viewer

5 Dec 20245 minutes to read

Why PDF Viewer (Classic) to PDF Viewer control

The migration to the PDF Viewer control brings a host of benefits, including improved performance in scrolling, pagination, and printing. These enhancements result in a smoother and more efficient user experience. Additionally, this migration eliminates the need for a Web assembly service dependency, streamlining the system and enhancing maintainability.

  • Enhanced Performance:
    With the PDF Viewer control, users can expect significant improvements in performance. Scrolling through documents, navigating pages, and printing operations are now optimized for efficiency. Users will experience seamless and fluid interactions, ensuring a more productive and satisfying workflow.

  • Elimination of Web Assembly Service Dependency:
    The migration to the PDF Viewer control removes the requirement for a Web assembly service dependency.

  • Unified Package for Multiple Platforms:
    The PDF Viewer control is now available as a unified package for Windows, Mac, and Linux platforms. This means that regardless of their operating system, users can effortlessly install and utilize the package.

Nuget Package

To initialize the PDF Viewer component, need to add the following project references to your .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 utilize the PDF Viewer component in your project, need to add the corresponding script file to the Host.cshtml or Layout.cshtml file based on your framework version.

NOTE

The script file is same for Server application and Web assembly application for 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" />
    <!-- Syncfusion Blazor PDF Viewer controls scripts -->
    <script src="_content/Syncfusion.Blazor.PdfViewer/scripts/syncfusion-blazor-pdfviewer.min.js" type="text/javascript"></script>
</head>
PDF Viewer 
<head>
    <!-- Syncfusion Blazor SfPdfViewer controls theme style sheet -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <!-- Syncfusion Blazor SfPdfViewer controls scripts -->
    <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
</head>

Program.cs

Add the following line to the Program.cs file to use the PDF Viewer component

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.

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

When using the PDF Viewer in a WebAssembly application, need to include the following lines in your .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

If you are WebAssembly application install SkiaSharp.NativeAssets.WebAssembly NuGet package.

NOTE

If you encounter issues while attempting to host the application in certain environments, such as Azure app services, install SkiaSharp.Views.Blazor instead of SkiaSharp.NativeAssets.WebAssembly Nuget package.

See also