Skip to content

Commit 070fefd

Browse files
Tamilselvan-DurairajTamilselvan-Durairaj
committed
984779: Added the documentation for the Blazor Smart Pdfviewer Hybrid section
1 parent ddd40ca commit 070fefd

File tree

5 files changed

+523
-0
lines changed

5 files changed

+523
-0
lines changed

‎Document-Processing-toc.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1650,6 +1650,8 @@
16501650
<li>Blazor Hybrid
16511651
<ul>
16521652
<li><a href="/document-processing/pdf/smart-pdf-viewer/blazor/getting-started/maui-blazor-app">Blazor MAUI App</a></li>
1653+
<li><a href="/document-processing/pdf/smart-pdf-viewer/blazor/getting-started/wpf-app">WPF</a></li>
1654+
<li><a href="/document-processing/pdf/smart-pdf-viewer/blazor/getting-started/winforms-app">Windows Forms</a></li>
16531655
</ul>
16541656
</li>
16551657
</li>

‎Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/winforms-app.md‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
---
2+
layout: post
3+
title: Getting started with Smart PDF Viewer in a WinForms App | Syncfusion
4+
description: Learn how to get started with the Smart PDF Viewer control in a WinForms Blazor Hybrid App to view, comment on, and fill PDF forms.
5+
platform: document-processing
6+
control: SfSmartPdfViewer
7+
documentation: ug
8+
---
9+
10+
# View PDF files using the Smart PDF Viewer in a WinForms Blazor Hybrid App
11+
12+
This article explains how to add the Syncfusion&reg; Blazor Smart 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%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
25+
26+
## Install Blazor Smart PDF Viewer NuGet package in WinForms App
27+
28+
To add **Blazor Smart 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.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer)
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+
{% endtabcontent %}
35+
36+
{% tabcontent Visual Studio Code %}
37+
38+
## Prerequisites
39+
40+
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
41+
42+
## Create a new WinForms app in Visual Studio Code
43+
44+
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%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
45+
46+
{% tabs %}
47+
{% highlight c# tabtitle="WinForms Blazor HybridApp" %}
48+
49+
dotnet new winforms -n WinFormsBlazorHybridApp
50+
51+
{% endhighlight %}
52+
{% endtabs %}
53+
54+
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Smart PDF Viewer and Themes NuGet packages in the app
55+
56+
Install the required NuGet packages in the WinForms project that will host the Blazor UI.
57+
58+
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
59+
* Ensure the current directory contains the WinForms project `.csproj` file.
60+
* Run the following commands to install [Syncfusion.Blazor.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer), [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 Smart PDF Viewer, theme, and the BlazorWebView host control.
61+
62+
{% tabs %}
63+
64+
{% highlight c# tabtitle="Package Manager" %}
65+
66+
dotnet add package Syncfusion.Blazor.SfSmartPdfViewer -v {{ site.releaseversion }}
67+
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
68+
dotnet add package Microsoft.AspNetCore.Components.WebView.WindowsForms
69+
70+
dotnet restore
71+
72+
{% endhighlight %}
73+
74+
{% endtabs %}
75+
76+
N> Syncfusion&reg; 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.
77+
78+
{% endtabcontent %}
79+
80+
{% endtabcontents %}
81+
82+
## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
83+
84+
The WinForms project must target Windows and enable WinForms. A typical project file looks like the following.
85+
86+
```csproj
87+
88+
<Project Sdk="Microsoft.NET.Sdk.Razor">
89+
90+
<PropertyGroup>
91+
<OutputType>WinExe</OutputType>
92+
<TargetFramework>net9.0-windows</TargetFramework>
93+
<Nullable>enable</Nullable>
94+
<UseWindowsForms>true</UseWindowsForms>
95+
<ImplicitUsings>enable</ImplicitUsings>
96+
</PropertyGroup>
97+
98+
</Project>
99+
100+
```
101+
102+
Create a `Component` folder, add an `_Imports.razor` file in it, and include the required component namespaces within that folder.
103+
104+
{% tabs %}
105+
{% highlight razor tabtitle="~/_Imports.razor" %}
106+
107+
@using Microsoft.AspNetCore.Components.Web
108+
@using Syncfusion.Blazor.SmartPdfViewer
109+
110+
{% endhighlight %}
111+
{% endtabs %}
112+
113+
## Create wwwroot folder and index.html file
114+
115+
* Create a new folder named wwwroot in the WinForms project root.
116+
117+
* 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:
118+
119+
120+
```html
121+
122+
<!DOCTYPE html>
123+
<html>
124+
<head>
125+
<meta charset="utf-8" />
126+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
127+
<title>WinForms Blazor Hybrid App</title>
128+
<base href="/" />
129+
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
130+
</head>
131+
<body>
132+
<div id="app">Loading...</div>
133+
<script src="_framework/blazor.webview.js"></script>
134+
<script src="_content/Syncfusion.Blazor.SfSmartPdfViewer/scripts/syncfusion-blazor-sfsmartpdfviewer.min.js" type="text/javascript"></script>
135+
</body>
136+
</html>
137+
138+
139+
```
140+
141+
## To Configure Azure OpenAI Service
142+
143+
This section is required only when enabling AI-powered features in Smart PDF Viewer (such as document summarization, smart redaction, or smart fill). It is not required for basic PDF rendering.
144+
145+
In **Visual Studio**, Go to Tools → NuGet Package Manager → Package Manager Console. Run these commands one by one:
146+
147+
{% tabs %}
148+
{% highlight razor tabtitle="Package Manager" %}
149+
150+
Install-Package Azure.AI.OpenAI
151+
Install-Package Microsoft.Extensions.AI
152+
Install-Package Microsoft.Extensions.AI.OpenAI -Version 9.8.0-preview.1.25412.6
153+
154+
{% endhighlight %}
155+
{% endtabs %}
156+
157+
In **Visual Studio Code**, open the terminal and run these commands:
158+
159+
{% tabs %}
160+
{% highlight razor tabtitle="Package Manager" %}
161+
162+
dotnet add package Azure.AI.OpenAI
163+
dotnet add package Microsoft.Extensions.AI
164+
dotnet add package Microsoft.Extensions.AI.OpenAI --version 9.8.0-preview.1.25412.6
165+
166+
{% endhighlight %}
167+
{% endtabs %}
168+
169+
Register Syncfusion Blazor services and BlazorWebView in **~/Form1.cs** so that the WinForms window can host Blazor components.
170+
171+
{% tabs %}
172+
{% highlight c# tabtitle="Form1.cs (WinForms host)" hl_lines="2 3 4 5 6 7 8 9 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 35" %}
173+
174+
namespace WinFormsBlazorHybridApp;
175+
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
176+
using Microsoft.Extensions.DependencyInjection;
177+
using Azure.AI.OpenAI;
178+
using Microsoft.Extensions.AI;
179+
using Syncfusion.Blazor;
180+
using Syncfusion.Blazor.AI;
181+
using System.ClientModel;
182+
using WinFormsBlazorHybridApp.Components;
183+
184+
public partial class Form1 : Form
185+
{
186+
public Form1()
187+
{
188+
InitializeComponent();
189+
var services = new ServiceCollection();
190+
services.AddWindowsFormsBlazorWebView();
191+
services.AddMemoryCache();
192+
services.AddSyncfusionBlazor();
193+
string azureOpenAiKey = "api-key";
194+
string azureOpenAiEndpoint = "endpoint URL";
195+
string azureOpenAiModel = "deployment-name";
196+
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(new Uri(azureOpenAiEndpoint), new ApiKeyCredential(azureOpenAiKey));
197+
IChatClient azureOpenAiChatClient = azureOpenAIClient.GetChatClient(azureOpenAiModel).AsIChatClient();
198+
services.AddChatClient(azureOpenAiChatClient);
199+
services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
200+
var blazorWebView = new BlazorWebView()
201+
{
202+
HostPage = "wwwroot\\index.html",
203+
Services = services.BuildServiceProvider(),
204+
Dock = DockStyle.Fill
205+
};
206+
blazorWebView.RootComponents.Add<YourRazorFileName>("#app");
207+
// Replace 'YourRazorFileName' with the actual Razor component class (e.g., Main) in your project's namespace
208+
this.Controls.Add(blazorWebView);
209+
}
210+
}
211+
212+
213+
{% endhighlight %}
214+
215+
{% endtabs %}
216+
217+
## Adding Blazor Smart PDF Viewer component
218+
219+
Create a Razor component (for example, SmartPDFViewer.razor) in the project and add the Syncfusion&reg; Smart PDF Viewer component to it within the `Component` folder
220+
221+
{% tabs %}
222+
{% highlight razor %}
223+
224+
@using Syncfusion.Blazor.SmartPdfViewer;
225+
226+
<SfSmartPdfViewer Height="100%" Width="100%" DocumentPath="https://cdn.syncfusion.com/content/pdf/http-succinctly.pdf">
227+
</SfSmartPdfViewer>
228+
229+
{% endhighlight %}
230+
{% endtabs %}
231+
232+
## Run the application
233+
234+
Run the WinForms application. The Syncfusion&reg; Blazor Smart PDF Viewer renders inside the WinForms window.
235+
236+
![WPF Blazor HybridApp Smart PDF Viewer rendering in browser](../images/blazor-hybrid-winforms-sfsmartpdfviewer.png)
237+
238+
>[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-smart-pdf-viewer-examples/tree/master/GettingStartedWinForms).
239+
240+
## See also
241+
242+
* [Document Summarizer in Blazor Smart PDF Viewer](../document-summarizer)
243+
* [Smart Redaction in Blazor Smart PDF Viewer](../smart-redaction)
244+
* [Smart Fill in Blazor Smart PDF Viewer](../smart-fill).

0 commit comments

Comments
 (0)