Skip to content

Commit d93a64d

Browse files
GokulprasathVenkatachalamGokulprasathVenkatachalam
authored
Merge pull request #1511 from syncfusion-content/984779-spv-hybrid
984779: Added the documentation for the Blazor Smart Pdfviewer Hybrid…
2 parents 43c06ea + 8b97531 commit d93a64d

14 files changed

+522
-9
lines changed

‎Document-Processing-toc.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1679,7 +1679,9 @@
16791679
</ul>
16801680
<li>Blazor Hybrid
16811681
<ul>
1682-
<li><a href="/document-processing/pdf/smart-pdf-viewer/blazor/getting-started/maui-blazor-app">Blazor MAUI App</a></li>
1682+
<li><a href="/document-processing/pdf/smart-pdf-viewer/blazor/getting-started/maui-blazor-app">.NET MAUI</a></li>
1683+
<li><a href="/document-processing/pdf/smart-pdf-viewer/blazor/getting-started/wpf-blazor-app">WPF Blazor App</a></li>
1684+
<li><a href="/document-processing/pdf/smart-pdf-viewer/blazor/getting-started/winforms-blazor-app">WinForms Blazor App</a></li>
16831685
</ul>
16841686
</li>
16851687
</li>

‎Document-Processing/PDF/Smart-PDF-Viewer/blazor/deepseek-service.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Getting Started with Smart PDF Viewer using DeepSeek AI
1111

12-
This guide explains how to integrate DeepSeek AI with the Syncfusion Smart PDF Viewer in a Blazor app.
12+
This article explains how to integrate DeepSeek AI with the Syncfusion Smart PDF Viewer in a Blazor app.
1313

1414
## Prerequisites
1515

‎Document-Processing/PDF/Smart-PDF-Viewer/blazor/gemini-service.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Getting Started with Smart PDF Viewer using Gemini AI Service
1111

12-
This guide provides step-by-step instructions for integrating and using the Syncfusion Blazor Smart PDF Viewer with Gemini AI services in a Blazor app.
12+
This article provides step-by-step instructions for integrating and using the Syncfusion Blazor Smart PDF Viewer with Gemini AI services in a Blazor app.
1313

1414
## Prerequisites
1515

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Using Smart PDF Viewer Component in the Blazor MAUI app
1111

12-
This section describes how to add the Syncfusion&reg; Blazor Smart PDF Viewer component to a .NET MAUI Blazor app and run it on Windows and Android.
12+
This article describes how to add the Syncfusion&reg; Blazor Smart PDF Viewer component to a .NET MAUI Blazor app and run it on Windows and Android.
1313

1414
## Prerequisites
1515

@@ -92,7 +92,7 @@ Note: Ensure the Syncfusion license is registered in the application before usin
9292

9393
## To Configure Azure OpenAI Service
9494

95-
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.
95+
This article 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.
9696

9797
In **Visual Studio**, Go to Tools → NuGet Package Manager → Package Manager Console. Run these commands one by one:
9898

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Getting Started with Smart PDF Viewer
1111

12-
This section briefly explains how to include [Blazor Smart PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-smart-pdf-viewer) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
12+
This article briefly explains how to include [Blazor Smart PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-smart-pdf-viewer) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
1313

1414
{% tabcontents %}
1515

‎Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/winforms-blazor-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+
# Using Smart PDF Viewer Component in the Windows Forms 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+
N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`.
35+
36+
![WinForms Blazor App Smart Pdfviewer NuGet package reference](../images/winforms-smart-pdfviewe-package.png)
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%">&reg;</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%">&reg;</sup> Blazor Smart PDF Viewer 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.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.
65+
66+
{% tabs %}
67+
68+
{% highlight c# tabtitle="Package Manager" %}
69+
70+
dotnet add package Syncfusion.Blazor.SfSmartPdfViewer -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&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.
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%">&reg;</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.SmartPdfViewer
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+
{% tabs %}
122+
{% highlight html tabtitle="wwwroot/index.html" hl_lines="8 13" %}
123+
124+
<!DOCTYPE html>
125+
<html>
126+
<head>
127+
<meta charset="utf-8" />
128+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
129+
<title>WinForms Blazor Hybrid App</title>
130+
<base href="/" />
131+
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
132+
</head>
133+
<body>
134+
<div id="app">Loading...</div>
135+
<script src="_framework/blazor.webview.js"></script>
136+
<script src="_content/Syncfusion.Blazor.SfSmartPdfViewer/scripts/syncfusion-blazor-sfsmartpdfviewer.min.js" type="text/javascript"></script>
137+
</body>
138+
</html>
139+
140+
{% endhighlight %}
141+
{% endtabs %}
142+
143+
N> Ensure that the Smart PDF Viewer static assets (themes and scripts) are loaded properly.
144+
145+
## To Configure Azure OpenAI Service
146+
147+
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.
148+
149+
In **Visual Studio**, Go to Tools → NuGet Package Manager → Package Manager Console. Run these commands one by one:
150+
151+
{% tabs %}
152+
{% highlight razor tabtitle="Package Manager" %}
153+
154+
Install-Package Azure.AI.OpenAI
155+
Install-Package Microsoft.Extensions.AI
156+
Install-Package Microsoft.Extensions.AI.OpenAI -Version 9.8.0-preview.1.25412.6
157+
158+
{% endhighlight %}
159+
{% endtabs %}
160+
161+
In **Visual Studio Code**, open the terminal and run these commands:
162+
163+
{% tabs %}
164+
{% highlight razor tabtitle="Package Manager" %}
165+
166+
dotnet add package Azure.AI.OpenAI
167+
dotnet add package Microsoft.Extensions.AI
168+
dotnet add package Microsoft.Extensions.AI.OpenAI --version 9.8.0-preview.1.25412.6
169+
170+
{% endhighlight %}
171+
{% endtabs %}
172+
173+
Register Syncfusion Blazor services and BlazorWebView in **~/Form1.cs** so that the WinForms window can host Blazor components.
174+
175+
{% tabs %}
176+
{% highlight c# tabtitle="Form1.cs (WinForms host)" hl_lines="2 3 4 5 6 7 8 9 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 31" %}
177+
178+
namespace WinFormsBlazorHybridApp;
179+
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
180+
using Microsoft.Extensions.DependencyInjection;
181+
using Azure.AI.OpenAI;
182+
using Microsoft.Extensions.AI;
183+
using Syncfusion.Blazor;
184+
using Syncfusion.Blazor.AI;
185+
using System.ClientModel;
186+
using WinFormsBlazorHybridApp.Components;
187+
....
188+
InitializeComponent();
189+
ServiceCollection 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+
BlazorWebView 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+
{% endhighlight %}
212+
{% endtabs %}
213+
214+
## Adding Blazor Smart PDF Viewer component
215+
216+
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
217+
218+
{% tabs %}
219+
{% highlight razor %}
220+
221+
@using Syncfusion.Blazor.SmartPdfViewer;
222+
223+
<SfSmartPdfViewer Height="100%" Width="100%" DocumentPath="https://cdn.syncfusion.com/content/pdf/http-succinctly.pdf">
224+
</SfSmartPdfViewer>
225+
226+
{% endhighlight %}
227+
{% endtabs %}
228+
229+
## Run the application
230+
231+
Run the WinForms application. The Syncfusion&reg; Blazor Smart PDF Viewer renders inside the WinForms window.
232+
233+
![WinForms Blazor HybridApp Smart PDF Viewer rendering in browser](../images/blazor-hybrid-winforms-sfsmartpdfviewer.png)
234+
235+
>[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-smart-pdf-viewer-examples/tree/master/GettingStartedWinForms).
236+
237+
## See also
238+
239+
* [Getting Started with Blazor Smart PDF Viewer Component in Blazor Web App](./web-app)
240+
* [Getting Started with Blazor Smart PDF Viewer Component in WPF Blazor Hybrid App](./wpf-blazor-app)
241+
* [Getting Started with Blazor Smart PDF Viewer Component in MAUI Blazor App](./maui-blazor-app)
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)