diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md b/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md index a84050726..d34d36ee9 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md @@ -133,7 +133,9 @@ N> If any errors occur while using the Android Emulator, see [Troubleshooting An ![Blazor Spreadsheet running in the Android emulator](images/android-emulator.png) -N> To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/syncfusion-maui-blazor-spreadsheet-integration). +To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). + +N> [View Sample In GitHub.](https://github.com/SyncfusionExamples/syncfusion-maui-blazor-spreadsheet-integration). ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md index d8ce8ba61..e0dd69bb5 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with the Blazor Spreadsheet in Web App -This section briefly explains how to include the [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section briefly explains how to include the [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -95,6 +95,58 @@ dotnet restore {% endtabcontent %} +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor Web App using .NET CLI + +Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. + +For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazor -o BlazorWebApp -int Auto +cd BlazorWebApp +cd BlazorWebApp.Client + +{% endhighlight %} +{% endtabs %} + +## 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. + +* Open a command prompt, terminal, or shell. +* Ensure you’re in the project root directory where your `.csproj` file is located (or the Client project if applicable). +* Run the following command to install a [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) 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.Spreadsheet -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} + +{% endtabs %} + +{% endtabcontent %} + {% endtabcontents %} ## Add import namespaces @@ -187,7 +239,9 @@ You can also experiment directly using the interactive playground below for a qu {% playground "https://blazorplayground.syncfusion.com/embed/BtLHDSMIxNVhqnlu?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2" %} -N> To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). 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/Spreadsheet). +To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). + +N> [View Sample In GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Spreadsheet). ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md index 8ffecb0d3..e9635d198 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Spreadsheet Component -This section briefly explains how to include [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section briefly explains how to include [Syncfusion® Blazor Spreadsheet](https://www.syncfusion.com/blazor-components/blazor-spreadsheet) component in your Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -86,6 +86,55 @@ dotnet restore {% endtabcontent %} +{% tabcontent .NET CLI %} + +## Prerequisites + +Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet --version + +{% endhighlight %} +{% endtabs %} + +## Create a Blazor WebAssembly App using .NET CLI + +Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. + +{% tabs %} +{% highlight c# tabtitle=".NET CLI" %} + +dotnet new blazorwasm -o BlazorApp +cd BlazorApp + +{% endhighlight %} +{% endtabs %} + +## Install Syncfusion® Blazor Spreadsheet and Themes NuGet in the App + +After creating the Blazor WebAssembly App, install the required Syncfusion NuGet packages using the .NET CLI. + +* Open a command prompt, terminal, or shell. +* Ensure you’re in the project root directory where your `.csproj` file is located. +* Run the following command to install a [Syncfusion.Blazor.Spreadsheet](https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet) 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.Spreadsheet -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} +dotnet restore + +{% endhighlight %} + +{% endtabs %} + +{% endtabcontent %} + {% endtabcontents %} ## Add import namespaces @@ -162,7 +211,9 @@ You can also experiment directly using the interactive playground below for a qu {% playground "https://blazorplayground.syncfusion.com/embed/BtLHDSMIxNVhqnlu?appbar=true&editor=true&result=true&errorlist=true&theme=fluent2" %} -N> To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). 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/Spreadsheet). +To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save). + +N> [View Sample In GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Spreadsheet). ## See Also diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md b/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md index 7b6b329af..ad4df52d7 100644 --- a/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md +++ b/Document-Processing/Excel/Spreadsheet/Blazor/open-and-save.md @@ -25,6 +25,8 @@ To open an Excel document using the interface, select the **File > Open** option ### Open an Excel file from a local path To load Excel files programmatically, they can be converted into byte arrays. This approach is particularly effective when files are retrieved from a backend service. +N> In Blazor WebAssembly, File.ReadAllBytes is not supported due to browser security limitations. To work with Excel files, use a [Base64-encoded Excel files](#open-an-excel-file-from-a-base64-string) instead. + {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -389,7 +391,7 @@ To load an Excel file from `Google Drive` in the Blazor Spreadsheet, follow the - [Google Cloud project](https://developers.google.com/workspace/guides/create-project) in the Google Cloud Console. - [Service account](https://cloud.google.com/iam/docs/service-accounts-create) within the GCP project. - [Service account key](https://cloud.google.com/iam/docs/keys-create-delete) (JSON) available on disk. -- [Google Drive API enabled](https://console.cloud.google.com/apis/library/drive.googleapis.com) for the project. +- [Google Drive API enabled](https://developers.cloud.google.com/apis/library/drive.googleapis.com) for the project. - [Google Drive account](https://drive.google.com/) with access to the file to download. - [Google.Apis.Drive.v3](https://www.nuget.org/packages/Google.Apis.Drive.v3) NuGet package installed in your project to access Google Drive API.