diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md index f540fcc909..ad313057e5 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/maui-blazor-app.md @@ -7,28 +7,33 @@ control: SfPdfViewer documentation: ug --- -# Getting Started with the PDF Viewer in .NET MAUI Blazor Hybrid App +# Getting Started with the PDF Viewer in a .NET MAUI Blazor Hybrid App This section explains how to create and run a .NET MAUI Blazor Hybrid application using the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) component. ## Prerequisites -To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For installation details, see the Microsoft documentation: [Install .NET MAUI](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin). +* Visual Studio 2022 (17.8 or later) with the **Mobile development with .NET** workload installed. +* .NET 8.0 SDK or later. +* Windows 10/11 (version 1809 or later) to build and run the Windows target. +* To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For installation details, see the Microsoft documentation: [Install .NET MAUI](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin). ## Create a new Blazor .NET MAUI app in Visual Studio -Create a **Blazor MAUI App** named **PDFViewerGettingStarted** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0). +1. Open Visual Studio and choose **File → New → Project**. +2. Search for **Blazor MAUI App**, select it, and click **Next**. +3. Name the project **PDFViewerGettingStarted** and click **Create** using the [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0). N> The PDF Viewer supports .NET 8.0 and later. -## Install Syncfusion® Blazor SfPdfViewer NuGet Packages +## Install Blazor SfPdfViewer NuGet Packages -To add **Syncfusion Blazor SfPdfViewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install: +To add the **Blazor SfPdfViewer (Next-Gen)** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install: * [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, you can use the following Package Manager command to install the same packages. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -39,9 +44,9 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Add import namespaces +## Import namespaces -After the packages are installed, open the `~/_Imports.razor` file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SfPdfViewer` namespaces. +Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SfPdfViewer` namespaces. {% tabs %} {% highlight razor tabtitle="_Imports.razor" %} @@ -81,27 +86,23 @@ builder.Services.AddSyncfusionBlazor(); The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). -### Add stylesheet resource - Add the stylesheet at the end of the `` section in the `~/wwwroot/index.html` file to apply proper layout and theme styling. {% tabs %} {% highlight html tabtitle="index.html" %} - + {% endhighlight %} {% endtabs %} -### Add script resource - Add the required script at the end of the `` section in the `~/wwwroot/index.html` file to enable component functionality. {% tabs %} {% highlight html tabtitle="index.html" %} - + {% endhighlight %} @@ -109,9 +110,9 @@ Add the required script at the end of the `` section in the `~/wwwroot/ind N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Syncfusion® Blazor PDF Viewer Component +## Add Blazor PDF Viewer component -Add the Syncfusion® PDF Viewer (Next-Gen) component to `~/Pages/Index.razor`. +Add the Blazor PDF Viewer (Next-Gen) component to `~/Pages/Index.razor`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -126,35 +127,35 @@ Add the Syncfusion® PDF Viewer (Next-Gen) c {% endhighlight %} {% endtabs %} -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. Use the Open toolbar option to browse and open a PDF. +N> The sample [`DocumentPath`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) points to a remote URL. The device running the app must have internet access for the PDF to load. For offline scenarios, bundle the PDF in the project and load it with `LoadAsync` from embedded resources, or use the **Open** toolbar option to pick a local file. For more information, see [Render a PDF document from an embedded source in the .NET MAUI Android app](../faqs/how-to-deploy-maui-using-android-emulator). +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 displays an empty viewer without a document. Use the **Open** toolbar option to browse and open a PDF. ## Run on Windows -In the Visual Studio toolbar, click the **Windows Machine** to build and run the app. Ensure the run profile is set to `Windows Machine` before starting the app. +1. In the Visual Studio toolbar, change the **Solution Platforms** dropdown to **Windows Machine**. +2. Press F5 (with the debugger) or Ctrl+F5 (without the debugger) to build and run the app. ![Running the app on a Windows machine](gettingstarted-images/Windows-machine.png) -After the application launches, the PDF Viewer renders the specified PDF document. +After the application launches, the PDF Viewer displays the specified PDF document. -![Blazor SfPdfViewer rendering the PDF document](gettingstarted-images/Windows-maui-output.png) +![Blazor SfPdfViewer2 rendering the PDF document](gettingstarted-images/Windows-maui-output.png) ## Run on Android -To run the PDF Viewer on Android using the Android emulator, follow these steps: - -![Android emulator configuration for .NET MAUI](gettingstarted-images/android-maui.png) +1. In Visual Studio, change the **Solution Platforms** dropdown to **Android Emulators** and select a running emulator. If no emulator is available, create one using the **Android Device Manager**. +2. Press F5 to build and deploy the app to the emulator. For setup and usage, see [Android Emulator setup for .NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows). -N> If any errors occur while using the Android Emulator, see [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +![Android emulator configuration for .NET MAUI](gettingstarted-images/android-maui.png) -![Blazor SfPdfViewer running in the Android emulator](gettingstarted-images/android-emulator.png) +N> If any errors occur while using the Android Emulator, see [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). -N> To learn how to open, view, or interact with PDF files in the PDF Viewer component, see [Open and Save](.././opening-pdf-file). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20.NET%20MAUI/MauiBlazorWindow). Looking for the full Blazor PDF Viewer component overview, features, pricing, and documentation? Visit the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) page. +![Blazor SfPdfViewer2 running in the Android emulator](gettingstarted-images/android-emulator.png) ## See Also * [Getting Started with Blazor PDF Viewer Component in WinForms Blazor Hybrid App](./winforms-blazor-app) * [Getting Started with Blazor PDF Viewer Component in WPF Blazor Hybrid App](./wpf-blazor-app) -* [Supported features: desktop vs. mobile](./features#supported-features-desktop-vs-mobile) * [Render a PDF document from an embedded source in the .NET MAUI Android app](../faqs/how-to-deploy-maui-using-android-emulator) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md index d46aa2f857..c00512573c 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md @@ -19,19 +19,29 @@ This section explains how to include the [Blazor PDF Viewer](https://www.syncfus * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -N> If using **WebAssembly** or **Auto** interactive render modes, install the required workload for SkiaSharp: -N> ```bash -N> dotnet workload install wasm-tools -N> ``` -N> For specific .NET versions, use: -N> * `wasm-tools-net8` for .NET 8 -N> * `wasm-tools-net9` for .NET 9 +### Install the required .NET workloads (Blazor WebAssembly / Auto render modes) + +If using **WebAssembly** or **Auto** interactive render modes, install the required workload for SkiaSharp. Run the following command in a command prompt (Windows), terminal (macOS), or shell (Linux): + +{% tabs %} +{% highlight bash tabtitle="bash" %} + +dotnet workload install wasm-tools + +{% endhighlight %} +{% endtabs %} + +For specific .NET versions, use the version-specific workload: + +* `dotnet workload install wasm-tools-net8` for .NET 8 +* `dotnet workload install wasm-tools-net9` for .NET 9 +* `dotnet workload install wasm-tools-net10` for .NET 10 ## Create a new Blazor Web App in Visual Studio -Create a Blazor Web App using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), ensuring the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) are configured during creation. +Use Visual Studio 2022 to create a Blazor Web App via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). During creation, ensure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) are configured. -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages in the App +## Install Blazor SfPdfViewer and Themes NuGet Packages in the App To add **Syncfusion Blazor SfPdfViewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). @@ -49,7 +59,10 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endtabs %} N> For **WebAssembly** or **Auto** render modes, install packages in the **client project**. -N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1), so ensure this version is referenced. +N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1). Ensure your project references this version. If the transitive version is not picked up, add the package explicitly: +N> ```bash +N> dotnet add package SkiaSharp.Views.Blazor -v 3.119.1 +N> ``` {% endtabcontent %} @@ -59,22 +72,32 @@ N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nug * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -N> If using **WebAssembly** or **Auto** interactive render modes, install the required workload for SkiaSharp: -N> ```bash -N> dotnet workload install wasm-tools -N> ``` -N> For specific .NET versions, use: -N> * `wasm-tools-net8` for .NET 8 -N> * `wasm-tools-net9` for .NET 9 +### Install the required .NET workloads (Blazor WebAssembly / Auto render modes) + +If using **WebAssembly** or **Auto** interactive render modes, install the required workload for SkiaSharp. Run the following command in the integrated terminal (Ctrl+`): + +{% tabs %} +{% highlight bash tabtitle="bash" %} + +dotnet workload install wasm-tools + +{% endhighlight %} +{% endtabs %} + +For specific .NET versions, use the version-specific workload: + +* `dotnet workload install wasm-tools-net8` for .NET 8 +* `dotnet workload install wasm-tools-net9` for .NET 9 +* `dotnet workload install wasm-tools-net10` for .NET 10 ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), ensuring the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) are configured during creation. +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). During creation, ensure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) are configured. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`). +For example, to create a Blazor Web App with the `Auto` interactive render mode using the Syncfusion Blazor template, use the following commands in the integrated terminal (Ctrl+`): {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight C# tabtitle="Blazor Web App" %} dotnet new blazor -o BlazorWebApp -int Auto cd BlazorWebApp @@ -83,17 +106,20 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages in the App +N> When using the default Microsoft `dotnet new blazor` template, the `-int Auto` flag is not supported and a `.Client` project is not created. In that case, use `dotnet new blazor --interactivity Auto -o BlazorWebApp` and run all subsequent commands in the project root. + +## Install Blazor SfPdfViewer and Themes NuGet Packages in the App If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you're in the project root directory where your `.csproj` file is located. -* Run the following command to install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. +* For **WebAssembly** or **Auto** render modes, navigate to the client project directory. +* For the **Server** render mode, ensure you are in the project root directory where your `.csproj` file is located. +* Run the following commands to install the [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} -{% highlight c# tabtitle="Package Manager" %} +{% highlight C# tabtitle="Package Manager" %} dotnet add package Syncfusion.Blazor.SfPdfViewer -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} @@ -103,9 +129,12 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details. N> For **WebAssembly** or **Auto** render modes, install packages in the **client project**. -N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1), so ensure this version is referenced. +N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1). Ensure your project references this version. If the transitive version is not picked up, add the package explicitly: +N> ```bash +N> dotnet add package SkiaSharp.Views.Blazor -v 3.119.1 +N> ``` {% endtabcontent %} @@ -113,32 +142,42 @@ N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nug ## Prerequisites -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows), terminal (macOS), or shell (Linux): {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight C# tabtitle=".NET CLI" %} dotnet --version {% endhighlight %} {% endtabs %} -N> If using **WebAssembly** or **Auto** interactive render modes, install the required workload for SkiaSharp: -N> ```bash -N> dotnet workload install wasm-tools -N> ``` -N> For specific .NET versions, use: -N> * `wasm-tools-net8` for .NET 8 -N> * `wasm-tools-net9` for .NET 9 +### Install the required .NET workloads (Blazor WebAssembly / Auto render modes) + +If using **WebAssembly** or **Auto** interactive render modes, install the required workload for SkiaSharp. Run the following command in a command prompt (Windows), terminal (macOS), or shell (Linux): + +{% tabs %} +{% highlight bash tabtitle="bash" %} + +dotnet workload install wasm-tools + +{% endhighlight %} +{% endtabs %} + +For specific .NET versions, use the version-specific workload: + +* `dotnet workload install wasm-tools-net8` for .NET 8 +* `dotnet workload install wasm-tools-net9` for .NET 9 +* `dotnet workload install wasm-tools-net10` for .NET 10 ## Create a Blazor Web App using .NET CLI -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +Run the following command to create a new Blazor Web App in a command prompt (Windows), terminal (macOS), or shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +For example, to create a Blazor Web App with the `Auto` interactive render mode using the Syncfusion Blazor template, use the following commands: {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight C# tabtitle=".NET CLI" %} dotnet new blazor -o BlazorWebApp -int Auto cd BlazorWebApp @@ -147,15 +186,18 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet in the App +N> When using the default Microsoft `dotnet new blazor` template, the `-int Auto` flag is not supported and a `.Client` project is not created. In that case, use `dotnet new blazor --interactivity Auto -o BlazorWebApp` and run all subsequent commands in the project root. + +## Install Blazor SfPdfViewer and Themes NuGet Packages in the App * Open a command prompt, terminal, or shell. -* Ensure you’re in the project root directory where your `.csproj` file is located (or the Client project if applicable). -* Run the following command to install a [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* For **WebAssembly** or **Auto** render modes, navigate to the client project directory. +* For the **Server** render mode, ensure you are in the project root directory where your `.csproj` file is located. +* Run the following commands to install the [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} -{% highlight c# tabtitle="Package Manager" %} +{% highlight C# tabtitle="Package Manager" %} dotnet add package Syncfusion.Blazor.SfPdfViewer -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} @@ -166,15 +208,18 @@ dotnet restore {% endtabs %} N> For **WebAssembly** or **Auto** render modes, install packages in the **client project**. -N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1), so ensure this version is referenced. +N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1). Ensure your project references this version. If the transitive version is not picked up, add the package explicitly: +N> ```bash +N> dotnet add package SkiaSharp.Views.Blazor -v 3.119.1 +N> ``` {% endtabcontent %} {% endtabcontents %} -## Add import namespaces +## Add namespaces -After the package is installed, open the `~/_Imports.razor` file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SfPdfViewer` namespaces. +After the package is installed, open the `~/_Imports.razor` file from the client project and add the `Syncfusion.Blazor` and `Syncfusion.Blazor.SfPdfViewer` namespaces: {% tabs %} {% highlight razor tabtitle="_Imports.razor" %} @@ -185,10 +230,10 @@ After the package is installed, open the `~/_Imports.razor` file from the client {% endhighlight %} {% endtabs %} -Add the `Syncfusion.Blazor` namespace to the `Program.cs` file. +Add the `Syncfusion.Blazor` namespace to the `~/Program.cs` file: {% tabs %} -{% highlight c# tabtitle="Program.cs" %} +{% highlight C# tabtitle="Program.cs" %} using Syncfusion.Blazor; @@ -197,10 +242,10 @@ using Syncfusion.Blazor; ## Register Syncfusion® Blazor service -Register the Syncfusion® Blazor service in the `~/Program.cs` file after the **builder** is created in the Blazor Web App. +Register the Syncfusion® Blazor service in the `~/Program.cs` file after the **builder** is created in the Blazor Web App. `AddMemoryCache()` is required by the SfPdfViewer to cache document and rendering data, and `AddSignalR` (Server/Auto modes) is required to allow large PDF payloads (size is in bytes; default is 32 KB). {% tabs %} -{% highlight c# tabtitle="(Program.cs) Server" %} +{% highlight C# tabtitle="(Program.cs) Server" %} // Configure SignalR (with increased message size) and enable memory caching builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; }); @@ -210,7 +255,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} -{% highlight c# tabtitle="(Program.cs) WebAssembly" %} +{% highlight C# tabtitle="(Program.cs) WebAssembly" %} // Enable memory caching builder.Services.AddMemoryCache(); @@ -219,7 +264,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} -{% highlight c# tabtitle="(Program.cs) Auto" %} +{% highlight C# tabtitle="(Program.cs) Auto" %} // Configure SignalR (with increased message size) and enable memory caching builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; }); @@ -230,33 +275,31 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the interactive render mode is set to WebAssembly or Auto, register the Syncfusion® Blazor service in both `~/Program.cs` files of the Blazor Web App. [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size) +N> If the interactive render mode is set to WebAssembly or Auto, register the Syncfusion® Blazor service in both `~/Program.cs` files of the Blazor Web App. See [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size). ## Add stylesheet and script resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). -### Add stylesheet resource +N> For **WebAssembly** or **Auto** render modes, the `_content/` static assets are exposed by the client project. Add the `` and ` {% endhighlight %} @@ -264,15 +307,13 @@ Add the required script at the end of the `` section in the `Components/Ap N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Syncfusion® Blazor PDF Viewer component - -Add the Syncfusion Blazor PDF Viewer (Next-Gen) component in the `~/Components/Pages/*.razor` file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +## Add Blazor PDF Viewer component -Add the Syncfusion® PDF Viewer component in `~/Pages/Home.razor`. +The Blazor PDF Viewer (Next-Gen) component is added in the `~/Components/Pages/Home.razor` file. If the **Interactivity Location** is set to `Per page/component` in the Web App, define a render mode directive at the top of the razor file (for example, `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`). {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ +@* desired render mode defined here *@ @rendermode InteractiveServer ® PDF Viewer component in {% endhighlight %} {% endtabs %} +N> The `Height="100%"` and `Width="100%"` values are relative to the parent container. Ensure the parent element (or the page body) has an explicit height, for example `style="height:100vh"`, otherwise the PDF Viewer may not render. +N> The [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property accepts an absolute URL (HTTP/HTTPS), a path relative to the app's `wwwroot` folder (for example, `"pdf/sample.pdf"`), or a base64-encoded PDF string. N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. -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 PDF. Use the **Open** toolbar option to browse and open a PDF. +N> If the `DocumentPath` property is not set, the PDF Viewer renders without loading a PDF. Use the **Open** toolbar option to browse and open a PDF. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor PDF Viewer in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor PDF Viewer will be displayed in your default web browser. ![Blazor Web App SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png) +## Next steps + +* To learn how to open, save, or manage PDF documents in the PDF Viewer component, s[Open and Save PDF files](../opening-pdf-file). +* To learn how to add and manage highlights, strike-through, free text, and shape annotations in the PDF Viewer component, see [Annotations](../annotation/overview). +* To learn how to read, fill, and work with AcroForm fields in the PDF Viewer component, see [Form filling](../forms/form-filling). +* To learn how to add, remove, and rearrange toolbar items in the PDF Viewer component, see [Toolbar customization](../toolbar/overview). + You can also experiment directly using the interactive playground below for a quick demo: {% playground "https://blazorplayground.syncfusion.com/embed/hXhHtILIfHjHlTTE?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2" %} -N> To learn how to open, view, or interact with PDF files in the PDF Viewer component, see [Open and Save](.././opening-pdf-file). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WebAppServerMode). Looking for the full Blazor PDF Viewer component overview, features, pricing, and documentation? Visit the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) page. +N> For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WebAppServerMode). Looking for the full Blazor PDF Viewer component overview, features, pricing, and documentation? Visit the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) page. ## See also * [Getting Started with Blazor PDF Viewer Component in Blazor WASM App](./web-assembly-application) - * [Getting Started with Blazor PDF Viewer Component in WSL mode](../deployment/wsl-application) - -* [Learn different ways to add script reference in Blazor Application](https://blazor.syncfusion.com/documentation/common/adding-script-references) - +* [Learn different ways to add script references in Blazor Application](https://blazor.syncfusion.com/documentation/common/adding-script-references) * [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size) - +* [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) * [.NET 9 Native Linking Issues with SkiaSharp and Emscripten 3.1.56](https://help.syncfusion.com/document-processing/faq/how-to-fix-skiasharp-native-reference-issue-in-blazor-net90-app) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md index c2f0ce88a3..c932dbbc85 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-assembly-application.md @@ -19,23 +19,33 @@ This section explains how to include the [Blazor PDF Viewer](https://www.syncfus * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -N> For **WebAssembly** Application, install the required workload for SkiaSharp: -N> ```bash -N> dotnet workload install wasm-tools -N> ``` -N> For specific .NET versions, use: -N> * `wasm-tools-net8` for .NET 8 -N> * `wasm-tools-net9` for .NET 9 +### Install the required .NET workloads (Blazor WebAssembly / Auto render modes) -## Create a new Blazor App in Visual Studio +If using **WebAssembly** Application, install the required workload for SkiaSharp. Run the following command in a command prompt (Windows), terminal (macOS), or shell (Linux): + +{% tabs %} +{% highlight bash tabtitle="bash" %} + +dotnet workload install wasm-tools + +{% endhighlight %} +{% endtabs %} + +For specific .NET versions, use the version-specific workload: + +* `dotnet workload install wasm-tools-net8` for .NET 8 +* `dotnet workload install wasm-tools-net9` for .NET 9 +* `dotnet workload install wasm-tools-net10` for .NET 10 + +## Create a new Blazor App in Visual Studio You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages -To add **Syncfusion Blazor SfPdfViewer** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor SfPdfViewer (Next-Gen)** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer), [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/), and [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/) (version `3.119.1`). -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, you can use the following package manager command. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -47,8 +57,8 @@ Install-Package SkiaSharp.Views.Blazor -Version 3.119.1 {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. -N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1), so ensure this version is referenced. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for a list of available packages. +N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1). Ensure this exact version to avoid runtime issues. {% endtabcontent %} @@ -58,19 +68,29 @@ N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nug * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -N> For **WebAssembly** Application, install the required workload for SkiaSharp: -N> ```bash -N> dotnet workload install wasm-tools -N> ``` -N> For specific .NET versions, use: -N> * `wasm-tools-net8` for .NET 8 -N> * `wasm-tools-net9` for .NET 9 +### Install the required .NET workloads (Blazor WebAssembly / Auto render modes) + +If using **WebAssembly** Application, install the required workload for SkiaSharp. Run the following command in a command prompt (Windows), terminal (macOS), or shell (Linux): + +{% tabs %} +{% highlight bash tabtitle="bash" %} + +dotnet workload install wasm-tools + +{% endhighlight %} +{% endtabs %} + +For specific .NET versions, use the version-specific workload: + +* `dotnet workload install wasm-tools-net8` for .NET 8 +* `dotnet workload install wasm-tools-net9` for .NET 9 +* `dotnet workload install wasm-tools-net10` for .NET 10 ## Create a new Blazor App in Visual Studio Code Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). +Alternatively, create a WebAssembly application from the integrated terminal (open with Ctrl+`). {% tabs %} @@ -87,8 +107,9 @@ cd BlazorApp ## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you're in the project root directory where your `.csproj` file is located. -* Run the following command to install [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. + +* Ensure you are in the project root directory where your `.csproj` file is located. +* Run the following command 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 [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/) (version `3.119.1`), and to ensure all dependencies are restored. {% tabs %} @@ -103,8 +124,8 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. -N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1), so ensure this version is referenced. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for a list of available packages. +N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1). Ensure this exact version to avoid runtime issues. {% endtabcontent %} @@ -122,17 +143,27 @@ dotnet --version {% endhighlight %} {% endtabs %} -N> For **WebAssembly** Application, install the required workload for SkiaSharp: -N> ```bash -N> dotnet workload install wasm-tools -N> ``` -N> For specific .NET versions, use: -N> * `wasm-tools-net8` for .NET 8 -N> * `wasm-tools-net9` for .NET 9 +### Install the required .NET workloads (Blazor WebAssembly / Auto render modes) + +If using **WebAssembly** Application, install the required workload for SkiaSharp. Run the following command in a command prompt (Windows), terminal (macOS), or shell (Linux): + +{% tabs %} +{% highlight bash tabtitle="bash" %} + +dotnet workload install wasm-tools + +{% endhighlight %} +{% endtabs %} + +For specific .NET versions, use the version-specific workload: + +* `dotnet workload install wasm-tools-net8` for .NET 8 +* `dotnet workload install wasm-tools-net9` for .NET 9 +* `dotnet workload install wasm-tools-net10` for .NET 10 ## Create a Blazor WebAssembly App using .NET CLI -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows), terminal (macOS), or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -143,13 +174,13 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -## Install Syncfusion® Blazor Spreadsheet and Themes NuGet in the App +## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet in the App After creating the Blazor WebAssembly App, install the required Syncfusion NuGet packages using the .NET CLI. * Open a command prompt, terminal, or shell. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where your `.csproj` file is located. +* Run the following command 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 [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/) (version `3.119.1`), and to ensure all dependencies are restored. {% tabs %} @@ -164,7 +195,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1), so ensure this version is referenced. +N> Syncfusion® uses [SkiaSharp.Views.Blazor version 3.119.1](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1). Ensure this exact version to avoid runtime issues. {% endtabcontent %} @@ -210,37 +241,33 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). - -### Add stylesheet resource +The theme stylesheet and script are exposed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). The paths below assume a **Blazor WebAssembly Standalone** project; for hosted or Blazor Web App projects, the same `_content/...` paths apply in the host `wwwroot/index.html`. Add the stylesheet at the end of the `` section in the `wwwroot/index.html` file to apply proper layout and theme styling. {% tabs %} {% highlight razor tabtitle="index.html" %} - + {% endhighlight %} {% endtabs %} -### Add script resource - Add the required script at the end of the `` section in the `wwwroot/index.html` file to enable component functionality. {% tabs %} {% highlight razor tabtitle="index.html" %} - + {% endhighlight %} {% endtabs %} -## Add Syncfusion® Blazor PDF Viewer Component +## Add Blazor PDF Viewer Component -Add the Syncfusion® PDF Viewer (Next-Gen) component in `~/Pages/Home.razor`. +Add the Blazor PDF Viewer (Next-Gen) component to `~/Pages/Home.razor`. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -253,22 +280,30 @@ Add the Syncfusion® PDF Viewer (Next-Gen) c {% endhighlight %} {% endtabs %} -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 PDF. Use the **Open** toolbar option to browse and open a PDF. +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 displays an empty viewer without a document. Use the **Open** toolbar option to browse and open a PDF. + +## Run the application -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor PDF Viewer in your default web browser. +* Press F5 or Ctrl+F5 (Windows) or ⌘+F5 (macOS) in the IDE to launch the application. From the CLI, run `dotnet run` from the project folder. The Blazor PDF Viewer will render in your default web browser. ![Blazor Web App SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png) -You can also experiment directly using the interactive playground below for a quick demo: +## Next steps + +* To learn how to open, save, or manage PDF documents in the PDF Viewer component, s[Open and Save PDF files](../opening-pdf-file). +* To learn how to add and manage highlights, strike-through, free text, and shape annotations in the PDF Viewer component, see [Annotations](../annotation/overview). +* To learn how to read, fill, and work with AcroForm fields in the PDF Viewer component, see [Form filling](../forms/form-filling). +* To learn how to add, remove, and rearrange toolbar items in the PDF Viewer component, see [Toolbar customization](../toolbar/overview). + +You can also experiment directly using the interactive playground below for a quick demo. {% playground "https://blazorplayground.syncfusion.com/embed/hXhHtILIfHjHlTTE?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2" %} -N> To learn how to open, view, or interact with PDF files in the PDF Viewer component, see [Open and Save](.././opening-pdf-file). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WasmStandalone). Looking for the full Blazor PDF Viewer component overview, features, pricing, and documentation? Visit the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) page. +N> For a hands-on reference with working code examples, explore the sample projects on [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WasmStandalone). +* For an overview, features, pricing, and full documentation, visit the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) page. ## See also -* [Getting Started with the Blazor PDF Viewer in a Blazor Web app Server app](./web-app) - +* [Getting Started with the Blazor PDF Viewer in a Blazor Web App Server app](./web-app) * [Getting Started with the Blazor PDF Viewer in WSL mode](../deployment/wsl-application) - * [.NET 9 Native Linking Issues with SkiaSharp and Emscripten 3.1.56](https://help.syncfusion.com/document-processing/faq/how-to-fix-skiasharp-native-reference-issue-in-blazor-net90-app) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md index 34be5e71d9..ecf64b8439 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/winforms-blazor-app.md @@ -7,31 +7,39 @@ control: SfPdfViewer documentation: ug --- -# View PDF files using the PDF Viewer in a WinForms Blazor Hybrid App +# View PDF files using the SfPdfViewer2 in a WinForms Blazor Hybrid App -This section explains how to add the Syncfusion® Blazor PDF Viewer to a WinForms Blazor Hybrid app using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop (WinForms) application that hosts Blazor UI inside a BlazorWebView control. +This section explains how to add the Syncfusion® Blazor SfPdfViewer2 to a WinForms Blazor Hybrid App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop (WinForms) application that hosts Blazor UI inside a BlazorWebView control. {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +## Prerequisites for Blazor PDF Viewer * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* .NET 8.0 SDK installed (required by the pinned `Microsoft.AspNetCore.Components.WebView.WindowsForms` 8.0.16 package). +* Visual Studio 2022 version 17.8 or later with the **.NET desktop development** workload installed. ## Create a new WinForms app in Visual Studio -Create a WinForms app using Visual Studio 2022 with the WinForms project template. The app hosts 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® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +1. Open Visual Studio 2022. +2. Go to **File → New → Project…**. +3. Choose the **Windows Forms App (.NET)** template (C#) and click **Next**. +4. Set the project name to `WinFormsBlazorHybridApp` (or any preferred name) and click **Next**. +5. From the **Framework** dropdown, select **.NET 8.0 (Long Term Support)** and click **Create**. + +The app hosts 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® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Blazor PDF Viewer NuGet packages -To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install: +To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (**Tools → NuGet Package Manager → Manage NuGet Packages for Solution**), then install: * [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) * [Microsoft.AspNetCore.Components.WebView.WindowsForms](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.WindowsForms) -N> Ensure the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16` so it is compatible with the .NET 8 target framework used by this tutorial. ![WinForms Blazor App SfPdfViewer NuGet package reference](../images/winforms-sfpdfviewer-package.png) @@ -39,16 +47,16 @@ N> Ensure the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is {% tabcontent Visual Studio Code %} -## Prerequisites +## Prerequisites for Blazor PDF Viewer * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new WinForms app in Visual Studio Code -Create a WinForms desktop project (not a WinForms Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WinForms project hosts 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® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a WinForms desktop project (not a WinForms Blazor Hybrid App) using the .NET CLI in Visual Studio Code. This WinForms project hosts 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® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). {% tabs %} -{% highlight c# tabtitle="WinForms Blazor HybridApp" %} +{% highlight c# tabtitle="WinForms Blazor Hybrid App" %} dotnet new winforms -n WinFormsBlazorHybridApp @@ -76,16 +84,16 @@ dotnet restore {% endtabs %} -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 package details. -N> Ensure the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16`. +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 package details. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16` so it is compatible with the .NET 8 target framework used by this tutorial. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion Blazor service +## Configure the WinForms project -The WinForms project must target Windows and enable WinForms. A typical project file looks like the following. +The WinForms project must target Windows, enable WinForms, and opt in to Razor components so that BlazorWebView and Syncfusion® Blazor components can be hosted. A complete `WinFormsBlazorHybridApp.csproj` looks like the following. {% tabs %} {% highlight xml tabtitle="WinFormsBlazorHybridApp.csproj" hl_lines="1" %} @@ -96,27 +104,33 @@ The WinForms project must target Windows and enable WinForms. A typical project -{% endhighlight %} +{% endhighlight %} {% endtabs %} -Create a **Component** folder, add an `_Imports.razor` file in it, and include the required component namespaces within that folder. +N> The `Microsoft.AspNetCore.Components.WebView.WindowsForms` 8.0.16 package requires `TargetFramework` to be `net8.0-windows` (or any `net8.0-*` TFM) and `UseRazorComponents` to be `true`. + +## Create the Component folder and _Imports.razor + +1. Right-click the project node in **Solution Explorer** and select **Add → New Folder**. Name it `Components`. +2. Right-click the new `Components` folder and select **Add → New Item → Razor Component**. Name it `_Imports.razor`. +3. Add the required namespaces to the `_Imports.razor` file so they apply to every Razor component in this folder. {% tabs %} {% highlight razor tabtitle="_Imports.razor" %} @using Microsoft.AspNetCore.Components.Web +@using Syncfusion.Blazor @using Syncfusion.Blazor.SfPdfViewer {% endhighlight %} {% endtabs %} -## Create wwwroot folder and index.html file - -* Create a new folder named `wwwroot` in the WinForms project root. +## Create the wwwroot folder and index.html -* Inside `wwwroot`, create an `index.html` host page for the Blazor UI. This host page initializes the Blazor runtime and loads static assets (themes and scripts). A basic `index.html` might look like the following: +* In **Solution Explorer**, right-click the project and select **Add → New Folder**. Name it `wwwroot`. +* Right-click the `wwwroot` folder and select **Add → New Item → HTML Page**. Name it `index.html`. This file becomes the host page for the Blazor UI; it initializes the Blazor runtime and loads static assets such as themes and scripts. -{% tabs %} +{% tabs %} {% highlight html tabtitle="index.html" hl_lines="8 13" %} @@ -138,12 +152,16 @@ Create a **Component** folder, add an `_Imports.razor` file in it, and include t {% endhighlight %} {% endtabs %} -N> Ensure that the PDF Viewer static assets (themes and scripts) are loaded properly. +* In **Solution Explorer**, right-click `wwwroot/index.html`, choose **Properties**, and set **Build Action** to **Content** and **Copy to Output Directory** to **Copy if newer** so the file is deployed next to the WinForms executable. + +N> Ensure that the PDF Viewer static assets (themes and scripts) are loaded properly. If they are missing, the viewer UI will render without styling or scripting. + +## Register Syncfusion® Blazor services and the BlazorWebView -Add the `Syncfusion.Blazor` namespace to the `~/Form1.cs` file. +Add the following `using` directives to `Form1.cs` so the WinForms host can resolve Blazor types and the project's `Components` namespace. {% tabs %} -{% highlight c# tabtitle="Form1.cs (WinForms host)" %} +{% highlight c# tabtitle="Form1.cs (WinForms host) - using directives" %} using Microsoft.AspNetCore.Components.WebView.WindowsForms; using Microsoft.Extensions.DependencyInjection; @@ -153,10 +171,10 @@ using WinFormsBlazorHybridApp.Components; {% endhighlight %} {% endtabs %} -Register `Syncfusion.Blazor` services and BlazorWebView in `~/Form1.cs` after component initialized so the WinForms window can host Blazor components. +Register the Syncfusion® Blazor services and the BlazorWebView in `Form1.cs` so the WinForms window can host Blazor components. {% tabs %} -{% highlight c# tabtitle="Form1.cs (WinForms host)" %} +{% highlight c# tabtitle="Form1.cs (WinForms host) - service registration" %} ServiceCollection services = new ServiceCollection(); services.AddWindowsFormsBlazorWebView(); @@ -175,41 +193,43 @@ this.Controls.Add(blazorWebView); {% endhighlight %} {% endtabs %} -## Adding Blazor PDF Viewer component +N> Replace `WinFormsBlazorHybridApp.Components` with the actual root namespace of your project if it differs from the project name. -Create a Razor component (for example, PDFViewer.razor) in the project and add the Syncfusion® PDF Viewer component to it within the **Component** folder. +## Add the Blazor PDF Viewer component + +Create a Razor component inside the **Components** folder. In **Solution Explorer**, right-click `Components`, choose **Add → New Item → Razor Component**, and name it `PdfViewer.razor`. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="PdfViewer.razor" %} -@using Syncfusion.Blazor.SfPdfViewer; +@using Syncfusion.Blazor.SfPdfViewer - - + Width="100%" /> {% endhighlight %} {% endtabs %} 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. +N> `DocumentPath` can point to a remote URL (as shown), a relative URL to a file copied to `wwwroot`, or a stream/byte array supplied programmatically. When loading a local file, ensure the file is configured to copy to the output directory. ## Run the app -Run the WinForms app. The Syncfusion® Blazor PDF Viewer renders inside the WinForms window. +* **Visual Studio:** Press F5 (with debugging) or Ctrl+F5 (without debugging). +* **Visual Studio Code:** From the terminal, run `dotnet run` in the project folder. + +The Blazor PDF Viewer renders inside the WinForms window. + +![WinForms Blazor Hybrid App SfPdfViewer2 rendering in the WinForms window](../images/blazor-hybrid-winforms-sfpdfviewer.png) -![WinForms Blazor HybridApp SfPdfViewer rendering in browser](../images/blazor-hybrid-winforms-sfpdfviewer.png) N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WinForms). Looking for the full Blazor PDF Viewer component overview, features, pricing, and documentation? Visit the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) page. ## See also * [Getting Started with Blazor PDF Viewer Component in Blazor WASM App](./web-assembly-application) - * [Getting Started with Blazor PDF Viewer Component in Blazor Web App](./web-app) - * [Getting Started with Blazor PDF Viewer Component in WPF Blazor Hybrid App](./wpf-blazor-app) - * [Getting Started with Blazor PDF Viewer Component in MAUI Blazor App](./maui-blazor-app) * [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md index 8c435a3738..c7ee6bb799 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wpf-blazor-app.md @@ -9,7 +9,7 @@ documentation: ug # View PDF files using the PDF Viewer in a WPF Blazor Hybrid App -This section explains how to add the Blazor PDF Viewer to a WPF Blazor Hybrid app using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The result is a desktop (WPF) application that hosts Blazor UI inside a BlazorWebView control. +This section explains how to add the Blazor PDF Viewer to a WPF Blazor Hybrid app using [Visual Studio](https://visualstudio.microsoft.com/vs/) or [Visual Studio Code](https://code.visualstudio.com/). The result is a desktop (WPF) application that hosts Blazor UI inside a `BlazorWebView` control. {% tabcontents %} @@ -18,21 +18,30 @@ This section explains how to add the Blazor PDF Viewer to a WPF Blazor Hybrid ap ## Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Install the **.NET 8 SDK** (or later) and the **.NET desktop development** workload in Visual Studio 2022 (includes the WPF template and the `Microsoft.WindowsDesktop.App` runtime). +* If you are not using the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), make sure the [Syncfusion NuGet feed](https://www.nuget.org/packages?q=syncfusion.blazor) is reachable. +* A valid Syncfusion license key. Register it as described in [How to register a license in an application](https://help.syncfusion.com/common/essential-studio/licensing/how-to-register-in-an-application). ## Create a new WPF app in Visual Studio -Create a WPF app using Visual Studio 2022 with the WPF project template. The app hosts 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® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +1. In Visual Studio 2022, choose **Create a new project**. +2. Select the **WPF Application** (or **WPF App (.NET)**) template for **C#**, then choose **Next**. +3. Set the project name (for example, `WPFBlazorHybridApp`) and the solution name, then choose **Next**. +4. Set the **Target framework** to **.NET 8.0 (Long-term support)** and choose **Create**. The WPF project will host Blazor components through `BlazorWebView`. + +For more details, see [Microsoft Blazor tooling](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Blazor PDF Viewer NuGet packages To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then install: -* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) -* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) -* [Microsoft.AspNetCore.Components.WebView.Wpf](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.Wpf) +* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) — version `{{ site.releaseversion }}` +* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) — version `{{ site.releaseversion }}` +* [Microsoft.AspNetCore.Components.WebView.Wpf](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebView.Wpf) — version `8.0.16` or later +* [Microsoft.Extensions.Caching.Memory](https://www.nuget.org/packages/Microsoft.Extensions.Caching.Memory) — required by `AddMemoryCache()` -N> Ensure the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated to version `8.0.16`. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.Wpf` is at least version `8.0.16`. ![WPF Blazor App SfPdfViewer NuGet package reference](../images/wpf-sfpdfviewer-package.png) @@ -43,26 +52,31 @@ N> Ensure the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated t ## Prerequisites * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* Install the **.NET 8 SDK** (or later). On Windows, also install the **.NET 8 Desktop Runtime** (provides the WPF/AppContext runtime). +* A valid Syncfusion license key. Register it as described in [How to register a license in an application](https://help.syncfusion.com/common/essential-studio/licensing/how-to-register-in-an-application). +* The [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) (optional, but recommended for scaffolding). ## Create a new WPF app in Visual Studio Code -Create a WPF desktop project (not a WPF Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WPF project hosts 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® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a WPF desktop project using the .NET CLI. This WPF project will host the Blazor UI through `BlazorWebView`. {% tabs %} -{% highlight c# tabtitle="WPF Blazor HybridApp" %} +{% highlight c# tabtitle="WPF project (hosts Blazor UI)" %} -dotnet new wpf -n WPFBlazorHybridApp +dotnet new wpf -n WPFBlazorHybridApp -f net8.0-windows {% endhighlight %} {% endtabs %} -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages in the app +For guidance, see [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). + +## Install Blazor PDF Viewer NuGet packages Install the required NuGet packages in the WPF project that will host the Blazor UI. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure the current directory contains the WPF project `.csproj` file. -* Run the following commands to install the required packages. This adds the PDF Viewer, theme, and the BlazorWebView host control. +* Run the following commands to install the required packages: {% tabs %} @@ -70,23 +84,24 @@ Install the required NuGet packages in the WPF project that will host the Blazor dotnet add package Syncfusion.Blazor.SfPdfViewer -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -dotnet add package Microsoft.AspNetCore.Components.WebView.Wpf +dotnet add package Microsoft.AspNetCore.Components.WebView.Wpf -v 8.0.16 +dotnet add package Microsoft.Extensions.Caching.Memory dotnet restore {% endhighlight %} {% endtabs %} -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 package details. -N> Ensure the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated to version `8.0.16`. +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 package details. +N> Ensure the package `Microsoft.AspNetCore.Components.WebView.Wpf` is at least version `8.0.16`. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion Blazor service +## Configure the project file -The WPF project must target Windows and enable WPF. A typical project file looks like the following. +The WPF project must target Windows, enable WPF, and use the Razor SDK. Open `WPFBlazorHybridApp.csproj` and make sure the project file contains the following: {% tabs %} {% highlight xml tabtitle="WPFBlazorHybridApp.csproj" hl_lines="1" %} @@ -97,15 +112,18 @@ The WPF project must target Windows and enable WPF. A typical project file looks -{% endhighlight %} +{% endhighlight %} {% endtabs %} -Create an `_Imports.razor` and add the component namespace +## Add the Razor imports file + +Create an `_Imports.razor` file at the project root (next to the `.csproj`) with the following content. This makes the namespaces available to all `.razor` files in the project without re-declaring them. {% tabs %} {% highlight razor tabtitle="_Imports.razor" %} @using Microsoft.AspNetCore.Components.Web +@using Syncfusion.Blazor @using Syncfusion.Blazor.SfPdfViewer {% endhighlight %} @@ -167,14 +185,12 @@ Resources.Add("services", services.BuildServiceProvider()); N> Ensure that the PDF Viewer static assets (themes and scripts) are loaded properly. -## Adding Blazor PDF Viewer component +## Add the Syncfusion PDF Viewer Razor component -Create a Razor component (for example, Main.razor) in the project and add the Syncfusion® PDF Viewer component to it. +Create a Razor component (for example, `Main.razor`) at the project root and add the Syncfusion PDF Viewer component. The `_Imports.razor` file you created earlier already provides the `Syncfusion.Blazor.SfPdfViewer` namespace, so an additional `@using` is not required. {% tabs %} -{% highlight razor %} - -@using Syncfusion.Blazor.SfPdfViewer; +{% highlight razor tabtitle="Main.razor" %} If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor ## Integrate Blazor into MainWindow.xaml -* Open MainWindow.xaml. -* Add the Microsoft.AspNetCore.Components.WebView.Wpf namespace. -* Embed the BlazorWebView control, set HostPage to wwwroot/index.html, and map a RootComponent that matches the Razor component type and the selector in index.html (#app). +1. Open `MainWindow.xaml`. +2. Add the `Microsoft.AspNetCore.Components.WebView.Wpf` namespace and a `local:` namespace that points to your project's root (this is used by the `RootComponent` mapping). +3. Embed the `BlazorWebView` control, set `HostPage` to `wwwroot/index.html`, and map a `RootComponent` whose `Selector` matches the `
` element in `index.html` and whose `ComponentType` matches the Razor component class you created (for example, `Main`). -{% tabs %} +{% tabs %} {% highlight xaml tabtitle="MainWindow.xaml" hl_lines="3 7 8 9 11 12" %} If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor -{% endhighlight %} +{% endhighlight %} {% endtabs %} ## Run the app -Run the WPF app. The Blazor PDF Viewer renders inside the WPF window. +**Visual Studio**: Press F5 (Debug) or Ctrl+F5 (Run without debugging). -![WPF Blazor HybridApp SfPdfViewer rendering in browser](../images/blazor-hybrid-wpf-sfpdfviewer.png) +**Visual Studio Code**: Run `dotnet run` from the project folder, or press F5 if you have the C# extension's debugger configured. + +The WPF window opens and the Blazor PDF Viewer renders inside the `BlazorWebView`. + +![WPF Blazor HybridApp SfPdfViewer rendering in WPF window](../images/blazor-hybrid-wpf-sfpdfviewer.png) + +## Next steps + +* Looking for the full Blazor PDF Viewer component overview, features, and pricing? Visit the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) page. N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20WPF). Looking for the full Blazor PDF Viewer component overview, features, pricing, and documentation? Visit the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) page. ## See also * [Getting Started with Blazor PDF Viewer Component in Blazor WASM App](./web-assembly-application) - * [Getting Started with Blazor PDF Viewer Component in Blazor Web App](./web-app) - * [Getting Started with Blazor PDF Viewer Component in WinForms Blazor Hybrid App](./winforms-blazor-app) - * [Getting Started with Blazor PDF Viewer Component in MAUI Blazor App](./maui-blazor-app) - * [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../faqs/how-to-processing-large-files-without-increasing-maximum-message-size) \ No newline at end of file