diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 14bbb0eb0..0bb0a6d05 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -478,7 +478,6 @@
  • Getting Started diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/deployment/aws-beanstalk-deployment.md b/Document-Processing/PDF/PDF-Viewer/blazor/deployment/aws-beanstalk-deployment.md index 056f5c834..a7819e440 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/deployment/aws-beanstalk-deployment.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/deployment/aws-beanstalk-deployment.md @@ -1,15 +1,15 @@ --- layout: post -title: Blazor SfPdfViewer deployment in AWS BeanStalk | Syncfusion -description: AWS Elastic Beanstalk simplifies the deployment and management of scalable web applications and services on Linux-based infrastructure +title: Deploy Blazor SfPdfViewer to AWS Elastic Beanstalk | Syncfusion +description: Add the Syncfusion Blazor PDF Viewer to a Blazor Server app and deploy it to AWS Elastic Beanstalk on Linux. platform: document-processing control: SfPdfViewer documentation: ug --- -# Deploy Blazor Server App on AWS Elastic Beanstalk Linux +# Deploy a Blazor Server app to AWS Elastic Beanstalk (Linux) -In this section, we'll guide you through the process of adding Syncfusion® Blazor PDF Viewer component to your Blazor Server app and deploy it on AWS Elastic Beanstalk. We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/AWS/AWS_Elastic_Beanstalk/SfPdfViewerApp). +This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor Server app and deploy the app to AWS Elastic Beanstalk (Linux). A fully functional sample is available in the [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/AWS/AWS_Elastic_Beanstalk/SfPdfViewerApp). ## Prerequisites @@ -19,11 +19,11 @@ In this section, we'll guide you through the process of adding Syncfusion® B Create a new Blazor Server app and name it **PDFViewerGettingStarted**. -N> The PDF Viewer component is supported from .NET 6.0 onwards. +N> The PDF Viewer component is supported on .NET 8.0 and later. ## Install Blazor PDF Viewer NuGet package in Blazor Server App -Add the following NuGet packages into the Blazor Server app. +Add the following NuGet packages to the Blazor Server app. * [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) @@ -74,16 +74,17 @@ Add the following stylesheet and script to the head section of the **~/Pages/_Ho + + - - + {% endhighlight %} {% endtabs %} ## Adding Blazor PDF Viewer Component -Add the Syncfusion® PDF Viewer (Next Gen) component in the **~/Pages/Index.razor** file +Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -98,42 +99,42 @@ Add the Syncfusion® PDF Viewer (Next Gen) c {% endhighlight %} {% endtabs %} -N> If you don't provide the `DocumentPath` property value, the PDF Viewer component will be rendered without loading the PDF document. Users can then use the **open** option from the toolbar to browse and open the PDF as required. +N> If the `DocumentPath` property is not set, the PDF Viewer renders without loading a PDF document. Users can use the **Open** option in the toolbar to browse and open a PDF as needed. ## Run the application -Run the application, and the PDF file will be displayed using Syncfusion® Blazor PDF Viewer component in your browser. +Run the application to display the PDF file in the Syncfusion® Blazor PDF Viewer component in the browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SfPdfViewer Component](aws-benstalk-deployment-images/blazor-pdfviewer.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Server SfPdfViewer rendering in browser](aws-benstalk-deployment-images/blazor-pdfviewer.png)" %} ## Steps to publish as AWS Elastic Beanstalk -1. Right-click the project and select Publish to AWS Elastic Beanstalk (Legacy) option. -![beanstalk-publish](aws-benstalk-deployment-images/beanstalk-publish.png) -2. Select the Deployment Target as Create a new application environment and click Next button. -![deployment-target](aws-benstalk-deployment-images/beanstalk-instance.png) -3. Choose the Environment Name in the dropdown list and the URL will be automatically assign and check the URL is available, if available click next otherwise change the URL -![beanstalk-environment-name](aws-benstalk-deployment-images/beanstalk-environment.png) -4. Select the instance type in t3a.micro from the dropdown list and click next. -![beanstalk-instance-type](aws-benstalk-deployment-images/beanstalk-aws-options.png) -5. Click the Next button to proceed further. -![beanstalk-roles](aws-benstalk-deployment-images/beanstalk-permissions.png) -6. Click the Next button -![beanstalk-review](aws-benstalk-deployment-images/beanstalk-review.png) -7. Click the Deploy button to deploy the sample on AWS Elastic Beanstalk. -![beanstalk-deploy](aws-benstalk-deployment-images/beanstalk-deploy.png) -8. After changing the status from Updating to Environment is healthy, click the URL. -![beanstalk-success-message](aws-benstalk-deployment-images/beanstalk-success.png) -9. After opening the provided URL the provided PDF document will be displayed in PDF Viewer. -![beanstalk-output](aws-benstalk-deployment-images/beanstalk-output.png) +1. Right-click the project and select Publish to AWS Elastic Beanstalk (Legacy). +![Publish to AWS Elastic Beanstalk in Visual Studio](aws-benstalk-deployment-images/beanstalk-publish.png) +2. Select the deployment target Create a new application environment, and then click Next. +![Create a new application environment selection](aws-benstalk-deployment-images/beanstalk-instance.png) +3. Choose an environment name. The URL is assigned automatically—verify availability. If the URL is available, click Next; otherwise, change the URL and retry. +![Configure Elastic Beanstalk environment name and URL](aws-benstalk-deployment-images/beanstalk-environment.png) +4. Select the instance type t3a.micro from the drop-down list, and then click Next. +![Select t3a.micro instance type](aws-benstalk-deployment-images/beanstalk-aws-options.png) +5. Click Next to proceed. +![Review required roles and permissions](aws-benstalk-deployment-images/beanstalk-permissions.png) +6. Click Next. +![Review configuration summary](aws-benstalk-deployment-images/beanstalk-review.png) +7. Click Deploy to publish the application to AWS Elastic Beanstalk. +![Deploy the application to Elastic Beanstalk](aws-benstalk-deployment-images/beanstalk-deploy.png) +8. When the environment status changes from Updating to Environment is healthy, click the provided URL. +![Elastic Beanstalk environment health and application URL](aws-benstalk-deployment-images/beanstalk-success.png) +9. Open the URL to view the application. The specified PDF document is displayed in the PDF Viewer. +![Application running with PDF rendered in the viewer](aws-benstalk-deployment-images/beanstalk-output.png) ## See also -* [Getting Started with Blazor PDF Viewer Component in Blazor WASM App](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-assembly-application) +* [Getting started with the Blazor PDF Viewer in a Blazor WebAssembly app](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-assembly-application) -* [Getting Started with Blazor PDF Viewer Component in WSL mode](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/wsl-application) +* [Getting started with the Blazor PDF Viewer in WSL mode](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/wsl-application) -* [Learn different ways to add script reference in Blazor Application](https://blazor.syncfusion.com/documentation/common/adding-script-references) +* [Ways to add script references in a Blazor application](https://blazor.syncfusion.com/documentation/common/adding-script-references) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/deployment/aws-benstalk-deployment-images/beanstalk-publish.png b/Document-Processing/PDF/PDF-Viewer/blazor/deployment/aws-benstalk-deployment-images/beanstalk-publish.png index 03a3240f8..bbfa982dd 100644 Binary files a/Document-Processing/PDF/PDF-Viewer/blazor/deployment/aws-benstalk-deployment-images/beanstalk-publish.png and b/Document-Processing/PDF/PDF-Viewer/blazor/deployment/aws-benstalk-deployment-images/beanstalk-publish.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/deploy-maui-windows.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/deploy-maui-windows.md index df65439e9..2c4ebb506 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/deploy-maui-windows.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/deploy-maui-windows.md @@ -1,29 +1,29 @@ --- layout: post -title: Deploy SfPdfViewer in Blazor MAUI in windows | Syncfusion -description: Learn how to deploy SfPdfViewer in Blazor MAUI Application on Windows in Syncfusion Blazor SfPdfViewer component and much more details. +title: Deploy SfPdfViewer in Blazor .NET MAUI on Windows | 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 PDF Viewer Component in the Blazor MAUI app +# View PDF files using the PDF Viewer in a Blazor .NET MAUI app -In this section, we'll guide you through the process of adding Syncfusion® Blazor PDF Viewer component to your Blazor Maui app. We'll break it down into simple steps to make it easy to follow. +This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor .NET MAUI app and deploy it on Windows. ## Prerequisites -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin). +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 MAUI App in Visual Studio +## Create a new Blazor .NET MAUI app in Visual Studio -Create a new Blazor MAUI app and name it **PDFViewerGettingStarted**. +Create a new Blazor .NET MAUI app and name it **PDFViewerGettingStarted**. -N> The PDF Viewer component is supported from .NET 6.0 onwards. +N> The PDF Viewer component is supported on .NET 8.0 and later. -## Install PDF Viewer NuGet package in Blazor Maui App +## Install PDF Viewer NuGet packages in the Blazor .NET MAUI app -Add the following NuGet packages into the Blazor Maui app. +Add the following NuGet packages to the Blazor .NET MAUI app. * [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) @@ -35,7 +35,7 @@ Add the following NuGet packages into the Blazor Maui app. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} -@using Syncfusion.Blazor +@using Syncfusion.Blazor @using Syncfusion.Blazor.SfPdfViewer {% endhighlight %} @@ -91,16 +91,18 @@ Add the following stylesheet and script to the head section of the **~/wwwroot/i + + - + {% endhighlight %} {% endtabs %} -## Add PDF Viewer component +## Add the PDF Viewer component -Add the Syncfusion® PDF Viewer (Next Gen) component in the **~/Pages/Index.razor** file. +Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -121,34 +123,34 @@ 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 value is not provided, the PDF Viewer component will be rendered without loading a PDF document. Users can then use the open option from the toolbar to browse and open a PDF as required. +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 document. Users can use the Open option in the toolbar to browse and open a PDF as needed. ## Run on Windows -Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. +Run the sample on a Windows machine to execute the Blazor .NET MAUI app. -![Run Windows machine](gettingstarted-images/Windows-machine.png) +![Running the app on a Windows machine](gettingstarted-images/Windows-machine.png) -Upon successfully launching the application, the PDF Viewer component will seamlessly render the specified PDF document within its interface. +After the application launches, the PDF Viewer renders the specified PDF document. -![Blazor SfPdfViewer Component](gettingstarted-images/Windows-maui-output.png) +![Blazor SfPdfViewer rendering the PDF document](gettingstarted-images/Windows-maui-output.png) ## Run on Android -To run the PDF Viewer in a Blazor Android MAUI application using the Android emulator, follow these steps: +To run the PDF Viewer in a Blazor .NET MAUI Android application using the Android emulator, follow these steps: -![Run Windows machine](gettingstarted-images/android-maui.png) +![Android emulator configuration for .NET MAUI](gettingstarted-images/android-maui.png) -Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android 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 you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +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). -![Blazor SfPdfViewer Component](gettingstarted-images/android-emulator.png) +![Blazor SfPdfViewer running in the Android emulator](gettingstarted-images/android-emulator.png) ->[View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/Maui/MauiBlazorWindow). +>[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/Maui/MauiBlazorWindow). ## See also -* [Supported Features: Desktop vs Mobile](./features#supported-features-desktop-vs-mobile). +* [Supported features: desktop vs. mobile](./features#supported-features-desktop-vs-mobile) -* [Render PDF Document from embedded source in the MAUI Android app](../how-to/deploy-maui-using-android-emulator). \ No newline at end of file +* [Render a PDF document from an embedded source in the .NET MAUI Android app](../how-to/deploy-maui-using-android-emulator) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/server-side-application.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/server-side-application.md deleted file mode 100644 index 6961cdb27..000000000 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/server-side-application.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -layout: post -title: Getting Started with SfPdfViewer in Blazor Server App | Syncfusion -description: Learn how to getting started with SfPdfViewer control in Blazor Server-side application. You can view and comment on PDFs in ease and also can fill fields. -platform: document-processing -control: SfPdfViewer -documentation: ug ---- - -# View PDF files using PDF Viewer Component in the Blazor Server app - -In this section, we'll guide you through the process of adding Syncfusion® Blazor PDF Viewer component to your Blazor Server app using Visual Studio and Visual Studio Code. We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer%20%202/BlazorServerApp/PDFViewerSample). - -{% tabcontents %} - -{% tabcontent Visual Studio %} - -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio - -You can create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). - -N> The PDF Viewer component is supported from .NET 6.0 onwards. - -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet in the App - -To add **Blazor PDFViewer** 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, you can utilize the following package manager command to achieve the same. - -{% tabs %} -{% highlight C# tabtitle="Package Manager" %} - -Install-Package Syncfusion.Blazor.SfPdfViewer -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} - -{% 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. - -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor App in Visual Studio Code - -You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). - -Alternatively, you can create a Server application using the following command in the terminal(Ctrl+`). - -{% tabs %} - -{% highlight c# tabtitle="Blazor Server App" %} - -dotnet new blazorserver -o BlazorApp -cd BlazorApp - -{% endhighlight %} - -{% endtabs %} - -N> The PDF Viewer component is supported from .NET 6.0 onwards. - -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet in the App - -* 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 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. - -{% 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 - -{% 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. - -{% endtabcontent %} - -{% endtabcontents %} - -## Register Syncfusion® Blazor Service - -* In the **~/_Imports.razor** file, add the following namespaces: - -{% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} - -@using Syncfusion.Blazor; -@using Syncfusion.Blazor.SfPdfViewer; - -{% endhighlight %} -{% endtabs %} - -* Register the Syncfusion® Blazor Service in the **~/Program.cs** file. - -{% tabs %} -{% highlight c# tabtitle="~/Program.cs" hl_lines="3 11 14" %} - -using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Web; -using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorPages(); -builder.Services.AddServerSideBlazor(); - -builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; }); - -// Add Syncfusion Blazor service to the container. -builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); - -{% endhighlight %} -{% endtabs %} - -N> [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../how-to/processing-large-files-without-increasing-maximum-message-size) - -## Adding stylesheet and script - -Add the following stylesheet and script to the head section. The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows: - -* For **.NET 6** Blazor Server app, include it in **~/Pages/_Layout.cshtml** file. - -* For **.NET 7** Blazor Server app, include it in the **~/Pages/_Host.cshtml** file. - -{% tabs %} -{% highlight cshtml %} - - - - - - - - -{% endhighlight %} -{% endtabs %} - -## Adding Blazor PDF Viewer Component - -Add the Syncfusion® PDF Viewer (Next Gen) component in the **~/Pages/Index.razor** file - -{% tabs %} -{% highlight razor %} - -@page "/" - - - - -{% endhighlight %} -{% endtabs %} - -N> If you don't provide the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property value, the PDF Viewer component will be rendered without loading the PDF document. Users can then use the **open** option from the toolbar to browse and open the PDF as required. - -## Run the application - -Run the application, and the PDF file will be displayed using Syncfusion® Blazor PDF Viewer component in your browser. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SfPdfViewer Component](gettingstarted-images/blazor-pdfviewer.png)" %} - -## See also - -* [Getting Started with Blazor PDF Viewer Component in Blazor WASM App](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-assembly-application) - -* [Getting Started with Blazor PDF Viewer Component in WSL mode](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/wsl-application) - -* [Learn different ways to add script reference in Blazor Application](https://blazor.syncfusion.com/documentation/common/adding-script-references) - -* [Processing Large Files Without Increasing Maximum Message Size in SfPdfViewer Component](../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/web-app.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/web-app.md index 3ff8c90d2..91263ff7e 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 Blazor Web App | Syncfusion -description: Learn how to getting started with SfPdfViewer control in Blazor Web App. You can view and comment on PDFs in ease and also can fill fields. +title: Getting started with SfPdfViewer in a Blazor Web App | 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 PDF Viewer Component in the Blazor Web app +# View PDF files using the PDF Viewer in a Blazor Web App -In this section, we’ll guide you through the process of adding Syncfusion® Blazor PDF Viewer component to your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. We’ll break it down into simple steps to make it easy to follow. +This article describes how to add the Syncfusion® Blazor PDF Viewer component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -19,14 +19,14 @@ In this section, we’ll guide you through the process of adding Syncfusion® * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* If you choose an Interactive render mode such as WebAssembly or Auto, ensure that you have the necessary .NET workloads installed to use the PDF Viewer component in a Blazor WebApp application with SkiaSharp. To do this, execute the following commands in the command prompt: +* 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 ## Create a new Blazor Web App in Visual Studio You can create a Blazor Web App using Visual Studio 2022 via [Microsoft Templates](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). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) when creating a Blazor Web App. ## Install Blazor PDF Viewer NuGet package in Blazor Web App @@ -35,9 +35,9 @@ To add **Blazor PDF Viewer** component in the app, open the NuGet package manage * [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) -If you select an Interactive render mode as WebAssembly or Auto, you can install the NuGet package in the client-side project to add component in Web App. +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> On the Syncfusion® side, we are using SkiaSharp.Views.Blazor version 3.116.1. Please make sure to reference this version as well. +N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.116.1. Ensure this version is referenced. * [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) ![SkiaSharp Views Blazor](gettingstarted-images/skia-sharp-image.png) @@ -50,14 +50,14 @@ N> On the Syncfusion® side, we are using Sk * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* If you choose an Interactive render mode such as WebAssembly or Auto, ensure that you have the necessary .NET workloads installed to use the PDF Viewer component in a Blazor WebApp application with SkiaSharp. To do this, execute the following commands in the command prompt: +* 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 ## Create a new Blazor Web App in Visual Studio Code You can create a **Blazor Web App** using Visual Studio Code via [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). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating a Blazor Web App. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -71,15 +71,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a Blazor Web App with various interactive modes and locations, see [Render interactive modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet in the App +## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages in the app -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using WebAssembly or Auto render modes in the Blazor Web App, install the Syncfusion® Blazor component 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 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. +* 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 %} @@ -93,9 +93,9 @@ 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). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the list of available packages and component details. -N> On the Syncfusion® side, we are using [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) version 3.116.1. Please make sure to reference this version as well. +N> Syncfusion® uses [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) version 3.116.1. Ensure this version is referenced. * dotnet add package SkiaSharp.Views.Blazor -v 3.116.1 ![SkiaSharp Views Blazor](gettingstarted-images/skia-sharp-image.png) @@ -108,8 +108,8 @@ N> On the Syncfusion® side, we are using [S | Interactive Render Mode | Description | | -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +| WebAssembly or Auto | Open **~/_Imports.razor** from the client project.| +| Server | Open **~/Components/_Imports.razor**.| * In the **~/_Imports.razor** file, add the following namespaces: @@ -122,11 +122,11 @@ N> On the Syncfusion® side, we are using [S {% endhighlight %} {% endtabs %} -* Register the Syncfusion® Blazor Service in the program.cs file of your Blazor Web App. +* Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +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. -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the interactive render mode is set to Server, the project contains a single **~/Program.cs** file. Register the Syncfusion® Blazor Service only in that file. {% tabs %} {% highlight c# tabtitle=".NET 9 & .NET 8 (~/Program.cs) Server" hl_lines="2 9 11 13" %} @@ -247,14 +247,16 @@ Add the following stylesheet and script to the head section of the **~/Component + + - + ``` ## Adding Blazor PDF Viewer Component -Add the Syncfusion® PDF Viewer (Next Gen) component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the **~Pages/.razor** component, as follows: +Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~Pages/.razor** file. If the interactivity location is set to Per page/component, define a render mode at the top of the **~Pages/.razor** component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -263,7 +265,7 @@ Add the Syncfusion® PDF Viewer (Next Gen) c | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +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. {% tabs %} {% highlight razor %} @@ -274,7 +276,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -N> If an interactivity location as Global no need to mention render mode. Set the interactivity mode for whole sample. +N> If the interactivity location is set to Global, a render mode does not need to be specified per page. The interactivity mode applies to the entire app. Add the Syncfusion® PDF Viewer component in the **~/Pages/Index.razor** file. @@ -290,15 +292,15 @@ Add the Syncfusion® PDF Viewer component in {% endhighlight %} {% endtabs %} -N> If you don’t provide the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property value, the PDF Viewer component will be rendered without loading the PDF document. Users can then use the **open** option from the toolbar to browse and open the PDF as required. +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 document. Users can use the **Open** option in the toolbar to browse and open a PDF as needed. ## Run the application -Run the application, and the PDF file will be displayed using Syncfusion® Blazor PDF Viewer component in your browser. +Run the application to display the PDF file in the Syncfusion® Blazor PDF Viewer component in the browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SfPdfViewer Component](gettingstarted-images/blazor-pdfviewer.png)" %} +{% 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)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer%20%202/BlazorWebApp). +N> [View the sample on GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PDFViewer%20%202/BlazorWebApp). ## 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 39425baba..9ca43aeb9 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 Blazor WASM App | Syncfusion -description: Checkout and learn about getting started with Blazor SfPdfViewer component in Blazor WebAssembly (WASM) App using Visual Studio and more. +title: Getting started with SfPdfViewer in a Blazor WASM app | 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 PDF Viewer Component in the Blazor WASM app +# View PDF files using the PDF Viewer in a Blazor WebAssembly (WASM) app -In this section, we'll guide you through the process of adding Syncfusion® Blazor PDF Viewer component to your Blazor WebAssembly (WASM) app using Visual Studio and Visual Studio Code. We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Getting%20Started/Client-side%20application). +This article describes how to add the Syncfusion® Blazor PDF Viewer component 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/Client-side%20application). {% tabcontents %} @@ -19,7 +19,7 @@ In this section, we'll guide you through the process of adding Syncfusion® B * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* To use the PDF Viewer component in a Blazor WebAssembly application with SkiaSharp, make sure to have the required .NET workloads installed by executing the following commands in the command prompt. +* To use the PDF Viewer component in a Blazor WebAssembly application with SkiaSharp, ensure the required .NET workloads are installed by running the following commands: * dotnet workload install wasm-tools * dotnet workload install wasm-tools-net8 @@ -27,17 +27,17 @@ In this section, we'll guide you through the process of adding Syncfusion® B 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-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -N> The PDF Viewer component is supported from .NET 6.0 onwards. +N> The PDF Viewer component is supported on .NET 8.0 and later. -## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet in the App +## Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages in the app -To add **Blazor PDFViewer** 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 PDF Viewer component to the app, 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) * [SkiaSharp.Views.Blazor](https://www.nuget.org/packages/SkiaSharp.Views.Blazor) -N> On the Syncfusion® side, we are using SkiaSharp.Views.Blazor version 3.116.1. Please make sure to reference this version as well. +N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.116.1. Ensure this version is referenced. {% endtabcontent %} @@ -55,7 +55,7 @@ N> On the Syncfusion® side, we are using Sk You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -68,13 +68,13 @@ cd BlazorApp {% endtabs %} -N> The PDF Viewer component is supported from .NET 6.0 onwards. +N> The PDF Viewer component is supported on .NET 8.0 and later. -## Install Syncfusion® Blazor NuGet Package in the App +## Install Syncfusion® Blazor NuGet packages in the app * 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 a [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) NuGet package and ensure all dependencies are installed. +* Run the following commands to install the [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) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -89,9 +89,9 @@ dotnet restore {% endtabs %} -N> On the Syncfusion® side, we are using SkiaSharp.Views.Blazor version 3.116.1. Please make sure to reference this version as well. +N> Syncfusion® uses SkiaSharp.Views.Blazor version 3.116.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. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the list of available packages and component details. {% endtabcontent %} @@ -110,7 +110,7 @@ N> Syncfusion® Blazor components are availa {% endhighlight %} {% endtabs %} -* Register the Syncfusion® Blazor Service in the program.cs file. +* Register the Syncfusion® Blazor Service in the **~/Program.cs** file. {% tabs %} {% highlight C# tabtitle=".NET 6 & .NET 7 (~/Program.cs)" hl_lines="3 9 13" %} @@ -143,16 +143,18 @@ Add the following stylesheet and script to the head section of the **wwwroot/ind + + - + {% endhighlight %} {% endtabs %} ## Adding Blazor PDF Viewer Component -Add the Syncfusion® PDF Viewer (Next Gen) component in the **~/Pages/Index.razor** file. +Add the Syncfusion® PDF Viewer (Next-Gen) component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -167,18 +169,18 @@ Add the Syncfusion® PDF Viewer (Next Gen) c {% endhighlight %} {% endtabs %} -N> If you don't provide the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property value, the PDF Viewer component will be rendered without loading the PDF document. Users can then use the **open** option from the toolbar to browse and open the PDF as required. +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 document. Users can use the **Open** option in the toolbar to browse and open a PDF as needed. ## Run the application -Run the application, and the PDF file will be displayed using Syncfusion® Blazor PDF Viewer component in your browser. +Run the application to display the PDF file in the Syncfusion® Blazor PDF Viewer component in the browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SfPdfViewer Component](gettingstarted-images/blazor-pdfviewer.png)" %} +{% 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)" %} ## See also -* [Getting Started with Blazor PDF Viewer Component in Blazor Server App](./server-side-application) +* [Getting started with the Blazor PDF Viewer in a Blazor Web app Server app](./web-app) -* [Getting Started with Blazor PDF Viewer (Next Gen) Component in WSL mode](./wsl-application) +* [Getting started with the Blazor PDF Viewer in WSL mode](./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/wsl-application.md b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wsl-application.md index 696dbc816..0c5a16b97 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wsl-application.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/getting-started/wsl-application.md @@ -1,39 +1,39 @@ --- layout: post -title: Getting Started with SfPdfViewer in Blazor WSL mode | Syncfusion -description: Learn how to getting started with SfPdfViewer control in Blazor WSL (Windows Subsystem for Linux) mode. +title: Getting started with SfPdfViewer in Blazor WSL | Syncfusion +description: Learn how to run the Syncfusion Blazor SfPdfViewer control in a Blazor app using Windows Subsystem for Linux (WSL). platform: document-processing control: SfPdfViewer documentation: ug --- -# Getting Started with Blazor PDF Viewer in WSL mode +# Getting started with the Blazor PDF Viewer in WSL mode -To run the Syncfusion® Blazor PDF Viewer (Next Gen) component in WSL (Windows Subsystem for Linux) mode, follow these steps: +Use the following steps to run the Syncfusion® Blazor PDF Viewer (Next-Gen) component in WSL (Windows Subsystem for Linux) mode: -**Step 1:** Enable the Windows Subsystem for Linux and the Virtual Machine Platform. +**Step 1:** Enable Windows Subsystem for Linux and Virtual Machine Platform. -![Create-new-blazor-wsl-app](gettingstarted-images/turn-features.png) +![Windows Features dialog with WSL and Virtual Machine Platform enabled](gettingstarted-images/turn-features.png) -To enable the Windows Subsystem for Linux (WSL) and the Virtual Machine Platform on Windows, follow these steps: +To enable Windows Subsystem for Linux (WSL) and Virtual Machine Platform on Windows: -Open the Start menu and search for `Control Panel`. Click on `Programs`, then click on `Turn Windows features on or off`. Scroll down and select the boxes next to `Windows Subsystem for Linux` and `Virtual Machine Platform`. Finally, Click `OK` and restart your machine. +Open the Start menu and search for `Control Panel`. Select `Programs`, then choose `Turn Windows features on or off`. Select `Windows Subsystem for Linux` and `Virtual Machine Platform`. Click `OK` and restart the computer. -After restarting your computer, you can install a Linux distribution like Ubuntu from the Microsoft Store and execute Linux commands directly in Windows. +After restart, install a Linux distribution such as Ubuntu from the Microsoft Store and run Linux commands directly in Windows. -**Step 2:** Install the `Ubuntu` +**Step 2:** Install Ubuntu -![Create-new-blazor-wsl-app](gettingstarted-images/ubuntu-install.png) +![Ubuntu install page in Microsoft Store](gettingstarted-images/ubuntu-install.png) -Ubuntu can be installed on a Windows machine by the Microsoft Store, follow these steps: +To install Ubuntu from the Microsoft Store: -Open the Microsoft Store on your Windows machine. Search for `Ubuntu` in the Microsoft Store search bar. Click on the `Ubuntu` application and click the `Get` button to download and install the application. Once the installation is complete, click on the `Launch` button to start Ubuntu. This will install Ubuntu as a Windows Subsystem for Linux (WSL), which allows you to run a Linux environment directly on Windows without the need for a virtual machine. +Open the Microsoft Store and search for Ubuntu. Select Ubuntu, then choose Get to download and install. After installation, select Launch to start Ubuntu. This installs Ubuntu as a WSL distribution, enabling a Linux environment in Windows without a separate virtual machine. -On Ubuntu, create a new user with a username and password. +On first launch, create a new Ubuntu user by providing a username and password. -![Create-new-blazor-wsl-app](gettingstarted-images/username-password.png) +![Ubuntu first-run prompt for username and password](gettingstarted-images/username-password.png) -**Step 3:** Install the dotnet framework for running the WSL (Windows Subsystem for Linux) in the project by running the following code one by one.  +**Step 3:** Install the .NET SDK for WSL by running the following commands one by one. ``` wget https://packages.microsoft.com/config/ubuntu/22.10/packages-microsoft-prod.deb -O packages-microsoft-prod.deb @@ -47,11 +47,11 @@ On Ubuntu, create a new user with a username and password. ``` -Check the comment dotnet --info and it should come as follows. +Run dotnet --info. The output should resemble the following: ![Create-new-blazor-wsl-app](gettingstarted-images/dotnet-info.png) -If the above result is not shown, please run the comments below +If the expected result is not shown, run the following commands: ``` sudo apt remove dotnet* @@ -66,17 +66,17 @@ If the above result is not shown, please run the comments below dotnet dotnet --info ``` -**Step 4:** Now, run the server or webassembly sample in WSL (Windows Subsystem for Linux) mode and it will run our Blazor PDF Viewer component. +**Step 4:** Run the server or WebAssembly sample in WSL mode; the Blazor PDF Viewer component should load. -![WSL-Mode](gettingstarted-images/WSL-Mode.png) +![Blazor app running in WSL mode](gettingstarted-images/WSL-Mode.png) -N> If you encounter any issues while running in WSL (Windows Subsystem for Linux) mode, use the following instructions to resolve them. +N> If any issues occur while running in WSL mode, use the following instructions to resolve them. -If the sample does not load the PDF file and throws an exception. +If the sample does not load the PDF file and an exception is thrown: -![Create-new-blazor-wsl-app](gettingstarted-images/exception.png) +![Exception shown when PDF fails to load](gettingstarted-images/exception.png) -Then, in the Ubuntu command window, run the following commands one by one to install all necessary Blazor PDF Viewer dependencies for a Linux run. +In the Ubuntu terminal, run the following commands one by one to install the required Blazor PDF Viewer dependencies for Linux: ``` sudo apt-get install libfontconfig1 @@ -86,12 +86,12 @@ Then, in the Ubuntu command window, run the following commands one by one to ins ``` -Close the project, reopen it, and run it in WSL mode. It will run properly. +Close the project, reopen it, and run it in WSL mode. It should run properly. -![Create-new-blazor-wsl-app](gettingstarted-images/final.png) +![Blazor PDF Viewer running successfully in WSL mode](gettingstarted-images/final.png) ## See also -* [Getting Started with Blazor PDF Viewer Component in Blazor Server App](./server-side-application) +* [Getting started with the Blazor PDF Viewer in a Blazor Web app Server app](./web-app) -* [Getting Started with Blazor PDF Viewer Component in Blazor WASM App](./web-assembly-application) +* [Getting started with the Blazor PDF Viewer in a Blazor WebAssembly app](./web-assembly-application) diff --git a/Document-Processing/PDF/PDF-Viewer/blazor/migration.md b/Document-Processing/PDF/PDF-Viewer/blazor/migration.md index a567040ff..a1f306d76 100644 --- a/Document-Processing/PDF/PDF-Viewer/blazor/migration.md +++ b/Document-Processing/PDF/PDF-Viewer/blazor/migration.md @@ -225,6 +225,6 @@ N> When hosting in certain environments (for example, Azure App Service), use [S ## See also -* [Getting Started with Blazor SfPdfViewer Component in Blazor Server App](./getting-started/server-side-application) +* [Getting Started with Blazor SfPdfViewer Component in Blazor Web app Server App](./getting-started/web-app) * [Getting Started with Blazor SfPdfViewer Component in Blazor WASM App](./getting-started/web-assembly-application) \ No newline at end of file diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md index 845a4cc1a..0fd6e65c7 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/maui-blazor-app.md @@ -21,10 +21,18 @@ Create a new .NET MAUI Blazor App in Visual Studio by selecting the template nam ## Install Smart PDF Viewer NuGet package in Blazor Maui App -Add the following NuGet packages to the Blazor MAUI app. +To add NuGet packages into the Blazor Maui app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install [Syncfusion.Blazor.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -* [Syncfusion.Blazor.SfSmartPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfSmartPdfViewer) -* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) +Alternatively, you can utilize the following package manager command to achieve the same. + +{% tabs %} +{% highlight razor tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.SfSmartPdfViewer -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} ## Register Syncfusion® Blazor Service diff --git a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md index 477297fa4..d9719362c 100644 --- a/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md +++ b/Document-Processing/PDF/Smart-PDF-Viewer/blazor/getting-started/web-app.md @@ -35,8 +35,8 @@ Alternatively, use the following package manager commands. {% tabs %} {% highlight razor tabtitle="Package Manager" %} -Install-Package Syncfusion.Blazor.SfSmartPdfViewer -Version 31.1.17 -Install-Package Syncfusion.Blazor.Themes -Version 31.1.17 +Install-Package Syncfusion.Blazor.SfSmartPdfViewer -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %}