Migration from PDF Viewer to PDF Viewer (NextGen)

20 Jun 20233 minutes to read

Why PDF Viewer to PDF Viewer (NextGen) control

  • Migration to PDF Viewer (NextGen) control offers enhanced performance in scrolling, pagination, and printing. These operations will now be smoother and more efficient, providing a better user experience.

  • Eliminates the need for a Web assembly service dependency. This consolidation reduces complexity and improves maintainability.
    SfPdfViewer control is now available as a unified package for Windows, Mac, and Linux platforms. This means that users can easily

  • Install and use the software regardless of their operating system. The unified package simplifies distribution and deployment, making it more convenient for users to access and utilize the software on different platforms.

Nuget Package

To initialize the PDF Viewer (NextGen) component, need to add the following project references to your project

PDF Viewer 
<ItemGroup>
    <PackageReference Include="Syncfusion.Blazor.PdfViewer"/>
</ItemGroup>
PDF Viewer (NextGen) 
<ItemGroup>
    <PackageReference Include="Syncfusion.Blazor.SfPdfViewer"/>
</ItemGroup>

Script File

To utilize the PDF Viewer (NextGen) 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 (NextGen) component

PDF Viewer 
<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 (NextGen) 
<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 (NextGen) component

PDF Viewer 
builder.Services.AddSyncfusionBlazor();
PDF Viewer (NextGen) 
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 (NextGen) component, add the following code in the Index.razor file.

PDF Viewer 
<SfPdfViewer DocumentPath="PDF_Succinctly.pdf" ServiceUrl="api/pdfviewer" Height="100%" Width="100%"></SfPdfViewer>
PDF Viewer (NextGen) 
<SfPdfViewer2 DocumentPath="PDF_Succinctly.pdf" Height="100%" Width="100%"></SfPdfViewer2>

Project.cs

When using the PDF Viewer (NextGen) in a WebAssembly application, need to include the following lines in your .csproj file to ensure proper functionality and compatibility

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

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