|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Getting started with SfPdfViewer in a WinForms App | Syncfusion |
| 4 | +description: Learn how to get started with the SfPdfViewer control in a WinForms Blazor Hybrid App to view, comment on, and fill PDF forms. |
| 5 | +platform: document-processing |
| 6 | +control: SfPdfViewer |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# View PDF files using the PDF Viewer in a WinForms Blazor Hybrid App |
| 11 | + |
| 12 | +This article explains how to add the Syncfusion® Blazor PDF Viewer component to a WinForms Blazor Hybrid App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop application (WinForms) that hosts Blazor UI inside a BlazorWebView control. |
| 13 | + |
| 14 | +{% tabcontents %} |
| 15 | + |
| 16 | +{% tabcontent Visual Studio %} |
| 17 | + |
| 18 | +## Prerequisites |
| 19 | + |
| 20 | +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) |
| 21 | + |
| 22 | +## Create a new WinForms app in Visual Studio |
| 23 | + |
| 24 | +Create a WinForms application using Visual Studio 2022 with the WinForms project template. The app will later host Blazor components via BlazorWebView. For reference, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion<sup style="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). |
| 25 | + |
| 26 | +## Install Blazor PDF Viewer NuGet package in WinForms App |
| 27 | + |
| 28 | +To add **Blazor PDF Viewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install |
| 29 | + |
| 30 | +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) |
| 31 | +* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) |
| 32 | +* [Microsoft.AspNetCore.Components.WebView.WindowsForms](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.WindowsForms) |
| 33 | + |
| 34 | +N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`. |
| 35 | + |
| 36 | + |
| 37 | + |
| 38 | +{% endtabcontent %} |
| 39 | + |
| 40 | +{% tabcontent Visual Studio Code %} |
| 41 | + |
| 42 | +## Prerequisites |
| 43 | + |
| 44 | +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) |
| 45 | + |
| 46 | +## Create a new WinForms app in Visual Studio Code |
| 47 | + |
| 48 | +Create a WinForms desktop project (not a WinForms Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WinForms project will host Blazor UI through BlazorWebView. For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). |
| 49 | + |
| 50 | +{% tabs %} |
| 51 | +{% highlight c# tabtitle="WinForms Blazor HybridApp" %} |
| 52 | + |
| 53 | +dotnet new winforms -n WinFormsBlazorHybridApp |
| 54 | + |
| 55 | +{% endhighlight %} |
| 56 | +{% endtabs %} |
| 57 | + |
| 58 | +## Install Syncfusion<sup style="font-size:70%">®</sup> Blazor SfPdfViewer and Themes NuGet packages in the app |
| 59 | + |
| 60 | +Install the required NuGet packages in the WinForms project that will host the Blazor UI. |
| 61 | + |
| 62 | +* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code. |
| 63 | +* Ensure the current directory contains the WinForms project `.csproj` file. |
| 64 | +* Run the following commands to install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer), [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and [Microsoft.AspNetCore.Components.WebView.WindowsForms](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.WindowsForms). This adds the PDF Viewer, theme, and the BlazorWebView host control. |
| 65 | + |
| 66 | +{% tabs %} |
| 67 | + |
| 68 | +{% highlight c# tabtitle="Package Manager" %} |
| 69 | + |
| 70 | +dotnet add package Syncfusion.Blazor.SfPdfViewer -v {{ site.releaseversion }} |
| 71 | +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} |
| 72 | +dotnet add package Microsoft.AspNetCore.Components.WebView.WindowsForms |
| 73 | + |
| 74 | +dotnet restore |
| 75 | + |
| 76 | +{% endhighlight %} |
| 77 | + |
| 78 | +{% endtabs %} |
| 79 | + |
| 80 | +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the list of available packages and component details. |
| 81 | + |
| 82 | +N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`. |
| 83 | + |
| 84 | +{% endtabcontent %} |
| 85 | + |
| 86 | +{% endtabcontents %} |
| 87 | + |
| 88 | +## Register Syncfusion<sup style="font-size:70%">®</sup> Blazor service |
| 89 | + |
| 90 | +The WinForms project must target Windows and enable WinForms. A typical project file looks like the following. |
| 91 | + |
| 92 | +{% tabs %} |
| 93 | +{% highlight xml tabtitle="WinFormsBlazorHybridApp.csproj" hl_lines="1" %} |
| 94 | + |
| 95 | +<Project Sdk="Microsoft.NET.Sdk.Razor"> |
| 96 | + |
| 97 | + .... |
| 98 | + |
| 99 | +</Project> |
| 100 | + |
| 101 | +{% endhighlight %} |
| 102 | +{% endtabs %} |
| 103 | + |
| 104 | +Create a `Component` folder, add an `_Imports.razor` file in it, and include the required component namespaces within that folder. |
| 105 | + |
| 106 | +{% tabs %} |
| 107 | +{% highlight razor tabtitle="~/_Imports.razor" %} |
| 108 | + |
| 109 | +@using Microsoft.AspNetCore.Components.Web |
| 110 | +@using Syncfusion.Blazor.SfPdfViewer |
| 111 | + |
| 112 | +{% endhighlight %} |
| 113 | +{% endtabs %} |
| 114 | + |
| 115 | +## Create wwwroot folder and index.html file |
| 116 | + |
| 117 | +* Create a new folder named wwwroot in the WinForms project root. |
| 118 | + |
| 119 | +* Inside wwwroot, create an index.html host page for the Blazor UI. This host page is required by BlazorWebView to initialize the Blazor runtime and load static assets (themes and scripts). A basic index.html might look like the following: |
| 120 | + |
| 121 | + |
| 122 | +{% tabs %} |
| 123 | +{% highlight html tabtitle="wwwroot/index.html" hl_lines="8 13" %} |
| 124 | + |
| 125 | +<!DOCTYPE html> |
| 126 | +<html> |
| 127 | +<head> |
| 128 | + <meta charset="utf-8" /> |
| 129 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 130 | + <title>WinForms Blazor Hybrid App</title> |
| 131 | + <base href="/" /> |
| 132 | + <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" /> |
| 133 | +</head> |
| 134 | +<body> |
| 135 | + <div id="app">Loading...</div> |
| 136 | + <script src="_framework/blazor.webview.js"></script> |
| 137 | + <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script> |
| 138 | +</body> |
| 139 | +</html> |
| 140 | + |
| 141 | +{% endhighlight %} |
| 142 | +{% endtabs %} |
| 143 | + |
| 144 | +N> Ensure that the PDF Viewer static assets (themes and scripts) are loaded properly. |
| 145 | + |
| 146 | +Register Syncfusion Blazor services and BlazorWebView in **~/Form1.cs** so that the WinForms window can host Blazor components. |
| 147 | + |
| 148 | +{% tabs %} |
| 149 | +{% highlight c# tabtitle="Form1.cs (WinForms host)" hl_lines="2 3 4 5 11 12 13 14 15 16 17 18 19 20 21" %} |
| 150 | + |
| 151 | +namespace WinFormsBlazorHybridApp; |
| 152 | +using Microsoft.AspNetCore.Components.WebView.WindowsForms; |
| 153 | +using Microsoft.Extensions.DependencyInjection; |
| 154 | +using Syncfusion.Blazor; |
| 155 | +using WinFormsBlazorHybridApp.Components; |
| 156 | + |
| 157 | +.... |
| 158 | + InitializeComponent(); |
| 159 | + ServiceCollection services = new ServiceCollection(); |
| 160 | + services.AddWindowsFormsBlazorWebView(); |
| 161 | + services.AddMemoryCache(); |
| 162 | + services.AddSyncfusionBlazor(); |
| 163 | + BlazorWebView blazorWebView = new BlazorWebView() |
| 164 | + { |
| 165 | + HostPage = "wwwroot\\index.html", |
| 166 | + Services = services.BuildServiceProvider(), |
| 167 | + Dock = DockStyle.Fill |
| 168 | + }; |
| 169 | + blazorWebView.RootComponents.Add<YourRazorFileName>("#app"); |
| 170 | + <!-- Replace 'YourRazorFileName' with the actual Razor component class (e.g., Main) in your project's namespace --> |
| 171 | + this.Controls.Add(blazorWebView); |
| 172 | +.... |
| 173 | + |
| 174 | +{% endhighlight %} |
| 175 | +{% endtabs %} |
| 176 | + |
| 177 | +## Adding Blazor PDF Viewer component |
| 178 | + |
| 179 | +Create a Razor component (for example, PDFViewer.razor) in the project and add the Syncfusion® PDF Viewer component to it within the `Component` folder |
| 180 | + |
| 181 | +{% tabs %} |
| 182 | +{% highlight razor %} |
| 183 | + |
| 184 | +@using Syncfusion.Blazor.SfPdfViewer; |
| 185 | + |
| 186 | +<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" |
| 187 | + Height="100%" |
| 188 | + Width="100%"> |
| 189 | +</SfPdfViewer2> |
| 190 | + |
| 191 | +{% endhighlight %} |
| 192 | +{% endtabs %} |
| 193 | + |
| 194 | +N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a document. Users can use the **Open** toolbar option to browse and open a PDF. |
| 195 | + |
| 196 | +## Run the application |
| 197 | + |
| 198 | +Run the WinForms application. The Syncfusion® Blazor PDF Viewer renders inside the WinForms window. |
| 199 | + |
| 200 | + |
| 201 | + |
| 202 | +>[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/WinForms). |
| 203 | +
|
| 204 | +## See also |
| 205 | + |
| 206 | +* [Getting Started with Blazor PDF Viewer Component in Blazor WASM App](./web-assembly-application) |
| 207 | + |
| 208 | +* [Getting Started with Blazor PDF Viewer Component in Blazor Web App](./web-app) |
| 209 | + |
| 210 | +* [Getting Started with Blazor PDF Viewer Component in WPF Blazor Hybrid App](./deploy-wpf-blazor-app) |
| 211 | + |
| 212 | +* [Getting Started with Blazor PDF Viewer Component in MAUI Blazor App](./deploy-maui-blazor-app) |
| 213 | + |
| 214 | +* [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../how-to/processing-large-files-without-increasing-maximum-message-size) |
0 commit comments