diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md index 9c7bb78b5..cb2033e7b 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md @@ -1,15 +1,15 @@ --- layout: post -title: Getting started with Syncfusion Spreadsheet in Blazor Web App +title: Getting Started with Blazor Spreadsheet Component | Syncfusion description: Check out the documentation for getting started with Syncfusion Blazor Spreadsheet Component in Blazor Web App. platform: document-processing control: Spreadsheet documentation: ug --- -# Getting Started with Blazor Spreadsheet in Web App +# Getting Started with the Blazor Spreadsheet in Web App -This section briefly explains about how to include [Syncfusion Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section provides a brief guide on including the [Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). {% tabcontents %} @@ -19,13 +19,13 @@ This section briefly explains about how to include [Syncfusion Blazor Spreadshee * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +## 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) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-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-8.0) 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. +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. -## Install Syncfusion® Blazor Spreadsheet and Themes NuGet in the App +## Install Syncfusion® Blazor Spreadsheet and Themes NuGet Packages in the App To add **Syncfusion Blazor Spreadsheet** 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.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). @@ -42,7 +42,7 @@ 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. +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 %} @@ -52,11 +52,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +## 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). +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. +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. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -72,7 +72,7 @@ cd BlazorWebApp.Client N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](./getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). -## Install Syncfusion® Blazor Spreadsheet and Themes NuGet in the App +## Install Syncfusion® Blazor Spreadsheet and Themes NuGet 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. @@ -92,7 +92,7 @@ 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 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 %} @@ -116,7 +116,7 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® BlazorService 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. @@ -233,4 +233,4 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor Spreadsheet in your default web browser. \ No newline at end of file +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor Spreadsheet in your default web browser. diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md index 8d4356efc..05f563729 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md @@ -142,16 +142,20 @@ Add the Syncfusion® Blazor Spreadsheet comp {% tabs %} {% highlight razor %} +Note: Due to browser-level restrictions in WebAssembly (WASM), the method File.ReadAllBytes is not supported. As a result, the sample implementations provided use a Base64-encoded Excel file to import data. This approach ensures compatibility with WASM environments, where direct file system access is limited. Instead of reading the file from disk, the Excel content is embedded or passed as a Base64 string, which is then decoded within the application to simulate file input. This method allows seamless data import while adhering to the constraints of the WebAssembly runtime. + @code { public byte[] DataSourceBytes { get; set; } + protected override void OnInitialized() { - string filePath = "wwwroot/Sample.xlsx"; - DataSourceBytes = File.ReadAllBytes(filePath); + // Replace with your base64-encoded Excel file + string base64File = "YourBase64EncodedExcelFileHere"; + DataSourceBytes = Convert.FromBase64String(base64File); } }