diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/gettingstarted-images/blazor-pdfviewer.png b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/gettingstarted-images/blazor-pdfviewer.png index 27589690a7..dba3e61694 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/gettingstarted-images/blazor-pdfviewer.png and b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/gettingstarted-images/blazor-pdfviewer.png differ 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 25c867827e..4bdc4d4eed 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 @@ -1,15 +1,15 @@ --- layout: post -title: Deploy SfPdfViewer in Blazor .NET MAUI on Windows | Syncfusion +title: Getting Started PDF Viewer .NET MAUI Blazor Hybrid App | Syncfusion description: Learn how to deploy the Syncfusion Blazor SfPdfViewer component in a Blazor .NET MAUI application on Windows. platform: document-processing control: SfPdfViewer documentation: ug --- -# View PDF files using the PDF Viewer in a Blazor .NET MAUI app +# Getting Started with the PDF Viewer in .NET MAUI Blazor Hybrid App -This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor .NET MAUI app and deploy it on Windows. +This section explains how to create and run a .NET MAUI Blazor Hybrid application using the [Syncfusion® Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) component. ## Prerequisites @@ -17,20 +17,31 @@ To use the .NET MAUI project templates, install the Mobile development with .NET ## Create a new Blazor .NET MAUI app in Visual Studio -Create a new Blazor .NET MAUI app named **PDFViewerGettingStarted**. +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). N> The PDF Viewer supports .NET 8.0 and later. -## Install PDF Viewer NuGet packages +## Install Syncfusion® Blazor SfPdfViewer NuGet Packages -Install the following NuGet packages in the Blazor .NET MAUI 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) -* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) +* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) -## Register Syncfusion Blazor service +Alternatively, you can utilize the following package manager command to achieve the same. -* In the **~/_Imports.razor** file, add the following namespaces: +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.SfPdfViewer -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +## Add import namespaces + +After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SfPdfViewer` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -41,7 +52,9 @@ Install the following NuGet packages in the Blazor .NET MAUI app. {% endhighlight %} {% endtabs %} -* Register Syncfusion Blazor service in the **~/MauiProgram.cs** file. +## Register Syncfusion® Blazor Service + +Register the Syncfusion® Blazor service in the **~/MauiProgram.cs** file. {% tabs %} {% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="3 20 28" %} @@ -81,12 +94,12 @@ public static class MauiProgram {% endhighlight %} {% endtabs %} -## Add stylesheet and script +## Add stylesheet and script resources -Add the following stylesheet and script to the head and body sections of **~/wwwroot/index.html**. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` in the **~/wwwroot/index.html** file as shown below: {% tabs %} -{% highlight html hl_lines="3 7" %} +{% highlight html tabtitle="index.html" hl_lines="3 7" %} @@ -100,15 +113,16 @@ Add the following stylesheet and script to the head and body sections of **~/www {% endhighlight %} {% endtabs %} -## Add the PDF Viewer component +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® PDF Viewer (Next-Gen) component to **~/Pages/Index.razor**. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} @page "/" - @using Syncfusion.Blazor.SfPdfViewer If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor ## Run on Windows -Run the app 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. ![Running the app on a Windows machine](gettingstarted-images/Windows-machine.png) @@ -147,14 +161,11 @@ N> If any errors occur while using the Android Emulator, see [Troubleshooting An ![Blazor SfPdfViewer running in the Android emulator](gettingstarted-images/android-emulator.png) -N> [View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20Hybrid%20-%20.NET%20MAUI/MauiBlazorWindow). +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). -## See also +## 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) 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 b767ae90e5..2b265a9432 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 @@ -1,15 +1,15 @@ --- layout: post -title: Getting started with SfPdfViewer in a Blazor Web App | Syncfusion +title: Getting Started with Blazor PDF Viewer Component | Syncfusion description: Learn how to get started with the SfPdfViewer control in a Blazor Web App to view, comment on, and fill PDF forms. platform: document-processing control: SfPdfViewer documentation: ug --- -# View PDF files using the PDF Viewer in a Blazor Web App +# Getting Started with the Blazor PDF Viewer in Web App -This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. +This section briefly explains how to include the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). {% tabcontents %} @@ -19,9 +19,9 @@ This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -N> If using an interactive render mode such as `WebAssembly` or `Auto`, ensure the required .NET workloads are installed for SkiaSharp usage in a Blazor Web App. Run the following command: -* dotnet workload install wasm-tools -* The above code will only install the latest available workload on the machine, such as .NET 10. If you need to install a specific .NET version like .NET 9 or .NET 8, please use a command such as `dotnet workload install wasm-tools-net8` and `dotnet workload install wasm-tools-net9`. +N> If using interactive render modes (WebAssembly or Auto), install the required .NET workloads for SkiaSharp: `dotnet workload install wasm-tools` +* Installs the latest SDK workload (e.g., .NET 10) +* For specific versions, use wasm-tools-net8 or wasm-tools-net9 ## Create a new Blazor Web App in Visual Studio @@ -29,31 +29,26 @@ Create a Blazor Web App using Visual Studio 2022 via [Microsoft Templates](https N> Configure 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) when creating a Blazor Web App. -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages +## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages in the App -To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package). +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/). -Alternatively, run the following command in the Package Manager Console to achieve the same. +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. -{% tabs %} +Alternatively, you can utilize the following package manager command to achieve the same. -{% highlight c# tabtitle="Package Manager" %} +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} -dotnet add package Syncfusion.Blazor.SfPdfViewer -v {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -dotnet restore +Install-Package Syncfusion.Blazor.SfPdfViewer -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} - {% endtabs %} -If using the `WebAssembly` or `Auto` interactive render mode, install the NuGet packages in the client project to add the component to the Web App. - -N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced. +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. Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced. * [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) -![SkiaSharp Views Blazor](gettingstarted-images/skia-sharp-image.png) - {% endtabcontent %} {% tabcontent Visual Studio Code %} @@ -62,9 +57,9 @@ N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this vers * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -N> If using an interactive render mode such as WebAssembly or Auto, ensure the required .NET workloads are installed for SkiaSharp usage in a Blazor Web App. Run the following command: -* dotnet workload install wasm-tools -* The above code will only install the latest available workload on the machine, such as .NET 10. If you need to install a specific .NET version like .NET 9 or .NET 8, please use a command such as `dotnet workload install wasm-tools-net8` and `dotnet workload install wasm-tools-net9`. +N> If using interactive render modes (WebAssembly or Auto), install the required .NET workloads for SkiaSharp: `dotnet workload install wasm-tools` +* Installs the latest SDK workload (e.g., .NET 10) +* For specific versions, use wasm-tools-net8 or wasm-tools-net9 ## Create a new Blazor Web App in Visual Studio Code @@ -84,11 +79,13 @@ cd BlazorWebApp.Client N> Configure 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) when creating a Blazor Web App. -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages +## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages in the App -To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package). +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. -Alternatively, run the following command in the Package Manager Console to achieve the same. +* 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. {% tabs %} @@ -102,13 +99,11 @@ dotnet restore {% endtabs %} -If using the `WebAssembly` or `Auto` interactive render mode, install the NuGet packages in the client project to add the component to the Web App. +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. Ensure this version is referenced. * [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) -![SkiaSharp Views Blazor](gettingstarted-images/skia-sharp-image.png) - {% endtabcontent %} {% endtabcontents %} @@ -130,8 +125,6 @@ After the package is installed, open the ~/_Imports.razor file from the client p Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Web App. -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. - {% tabs %} {% highlight c# tabtitle="(~/Program.cs) Server" hl_lines="2 9 11 13" %} @@ -198,11 +191,11 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -N> [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. [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 +## Add stylesheet and script resources -Add the following stylesheet and script to the head section of **~/Components/App.razor**. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. {% tabs %} {% highlight razor tabtitle="App.razor" hl_lines="3 7" %} @@ -219,31 +212,23 @@ Add the following stylesheet and script to the head section of **~/Components/Ap {% endhighlight %} {% endtabs %} -## Add Blazor PDF Viewer component +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 the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/*.razor** file. If interactivity location is Per page/component, define a render mode at the top of the page as follows: +## Add Syncfusion® Blazor PDF Viewer component -| Interactivity location | RenderMode | Code | -| --- | --- | --- | -| Per page/component | Auto | @rendermode InteractiveAuto | -| | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | -| | None | --- | +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`). -N> If the interactivity location is set to Global and the render mode is set to Auto, WebAssembly, or Server, the render mode is configured in the App.razor file by default. - -
Enable interactivity only via client-side rendering (CSR) by using the WebAssembly or Auto option +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. {% tabs %} {% highlight razor %} -@* Your App render mode define here *@ +@* desired render mode define here *@ @rendermode InteractiveAuto {% endhighlight %} {% endtabs %} - Add the Syncfusion® PDF Viewer component in **~/Pages/Index.razor**. {% tabs %} @@ -260,13 +245,15 @@ Add the Syncfusion® PDF Viewer component in 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. -## Run the app +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor PDF Viewer in your default web browser. + +![Blazor Web App SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png) -Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser. +You can also experiment directly using the interactive playground below for a quick demo: -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Web App SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png)" %} +{% playground "https://blazorplayground.syncfusion.com/embed/hXhHtILIfHjHlTTE?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2" %} -N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WebAppServerMode). +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). ## See also 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 04812e301a..8e0f952148 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 @@ -1,15 +1,15 @@ --- layout: post -title: Getting started with SfPdfViewer in a Blazor WASM app | Syncfusion +title: Getting Started with Blazor PDF Viewer Component in WASM | Syncfusion description: Learn how to get started with the Syncfusion Blazor SfPdfViewer component in a Blazor WebAssembly (WASM) app. platform: document-processing control: SfPdfViewer documentation: ug --- -# View PDF files using the PDF Viewer in a Blazor WebAssembly (WASM) app +# Getting Started with the PDF Viewer in Blazor WebAssembly (WASM) app -This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor WebAssembly (WASM) app using Visual Studio or Visual Studio Code. A fully functional example project is available in the [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Blazor%20WebAssembly). +This section briefly explains how to include the [Blazor PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/blazor-pdf-viewer) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). {% tabcontents %} @@ -19,34 +19,32 @@ This article shows how to add the Syncfusion® Blazor PDF Viewer to a Blazor * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -N> To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running: -* dotnet workload install wasm-tools -* dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0) +N> For WebAssembly Application, install the required .NET workloads for SkiaSharp: `dotnet workload install wasm-tools` +* Installs the latest SDK workload (e.g., .NET 10) +* For specific versions, use wasm-tools-net8 or wasm-tools-net9 ## 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 NuGet packages +## Install Syncfusion® Blazor SfPdfViewer and Themes 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*), or the integrated terminal in Visual Studio Code (dotnet add package). +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/). -Alternatively, run the following command in the Package Manager Console to achieve the same. +Alternatively, you can utilize the following package manager command to achieve the same. {% 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 }} -dotnet add package SkiaSharp.Views.Blazor -v 3.119.1 -dotnet restore +Install-Package Syncfusion.Blazor.SfPdfViewer -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +Install-Package SkiaSharp.Views.Blazor -Version 3.119.1 {% endhighlight %} - {% endtabs %} -N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced. +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. Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this version is referenced. +* [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) {% endtabcontent %} @@ -56,9 +54,9 @@ N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this vers * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -N> To use the PDF Viewer with SkiaSharp in a Blazor WebAssembly app, ensure the required .NET workloads are installed by running: -* dotnet workload install wasm-tools -* dotnet workload install wasm-tools-net8 (For .NET 8.0) or dotnet workload install wasm-tools-net9 (For .NET 9.0) or dotnet workload install wasm-tools-net10 (For .NET 10.0) +N> For WebAssembly Application, install the required .NET workloads for SkiaSharp: `dotnet workload install wasm-tools` +* Installs the latest SDK workload (e.g., .NET 10) +* For specific versions, use wasm-tools-net8 or wasm-tools-net9 ## Create a new Blazor App in Visual Studio Code @@ -78,11 +76,11 @@ cd BlazorApp {% endtabs %} -## Install Syncfusion® Blazor NuGet packages in the app - -To add the Blazor PDF Viewer component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package). +## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet Packages -Alternatively, run the following command in the Package Manager Console to achieve the same. +N> 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. {% tabs %} @@ -97,7 +95,10 @@ 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. Ensure this version is referenced. +* [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor/3.119.1) {% endtabcontent %} @@ -105,7 +106,7 @@ N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this vers ## Add import namespaces -* In the **~/_Imports.razor** file, add the following namespaces: +After the package is installed, open the ~/_Imports.razor file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SfPdfViewer` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -118,7 +119,7 @@ N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.119.1. Ensure this vers ## Register Syncfusion® Blazor Service -* Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="(~/Program.cs)" hl_lines="3 9 13" %} @@ -141,9 +142,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script +## Add stylesheet and script resources -Add the following stylesheet and script to the head section of **wwwroot/index.html**. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **wwwroot/index.html** file. {% tabs %} {% highlight razor tabtitle="index.html" hl_lines="3 7" %} @@ -160,9 +161,9 @@ Add the following stylesheet and script to the head section of **wwwroot/index.h {% endhighlight %} {% endtabs %} -## Add Blazor PDF Viewer component +## Add Syncfusion® Blazor PDF Viewer Component -Add the Syncfusion® PDF Viewer (Next-Gen) component to **~/Pages/Index.razor**. +Add the Syncfusion® PDF Viewer (Next-Gen) component in **~/Pages/Home.razor**. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -179,13 +180,15 @@ Add the Syncfusion® PDF Viewer (Next-Gen) c 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. -## Run the app +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor PDF Viewer in your default web browser. + +![Blazor Web App SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png) -Run the app to display the PDF in the Syncfusion® Blazor PDF Viewer in the browser. +You can also experiment directly using the interactive playground below for a quick demo: -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor WebAssembly SfPdfViewer rendering in browser](gettingstarted-images/blazor-pdfviewer.png)" %} +{% playground "https://blazorplayground.syncfusion.com/embed/hXhHtILIfHjHlTTE?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2" %} -N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer2/NET10/PDFViewer2_WasmStandalone). +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). ## See also