From c2777a093896a35b4a46d0f7f46c4b1fd3077bdc Mon Sep 17 00:00:00 2001 From: Deira-SF4418 Date: Tue, 5 May 2026 09:25:57 +0530 Subject: [PATCH 1/2] 1025145: Porting works in Angular spreadsheet component --- .../Spreadsheet/Angular/getting-started.md | 39 ++-- .../Spreadsheet/Angular/how-to-overview.md | 22 ++ .../open-excel-file/from-aws-s3-bucket.md | 176 +++++++++++++++ .../from-azure-blob-storage.md | 158 ++++++++++++++ .../from-google-cloud-storage.md | 150 +++++++++++++ .../open-excel-file/from-google-drive.md | 185 ++++++++++++++++ .../save-excel-file/to-aws-s3-bucket.md | 162 ++++++++++++++ .../save-excel-file/to-azure-blob-storage.md | 133 ++++++++++++ .../to-google-cloud-storage.md | 124 +++++++++++ .../save-excel-file/to-google-drive.md | 201 ++++++++++++++++++ ...adsheet-docker-to-azure-using-azure-cli.md | 91 ++++++++ ...eadsheet-server-to-aws-eks-using-docker.md | 137 ++++++++++++ ...eet-server-to-azure-using-visual-studio.md | 57 +++++ ...preadsheet-server-docker-image-overview.md | 101 +++++++++ .../web-services/webservice-overview.md | 49 +++++ .../webservice-using-aspnetcore.md | 143 +++++++++++++ .../webservice-using-aspnetmvc.md | 135 ++++++++++++ 17 files changed, 2037 insertions(+), 26 deletions(-) create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/how-to-overview.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-aws-s3-bucket.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-azure-blob-storage.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-cloud-storage.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-drive.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-aws-s3-bucket.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-azure-blob-storage.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-cloud-storage.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-drive.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/server-deployment/spreadsheet-server-docker-image-overview.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-overview.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetcore.md create mode 100644 Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetmvc.md diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md index 3dd6d909de..861168f45a 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md @@ -1,38 +1,20 @@ --- layout: post title: Getting started with Angular Spreadsheet component | Syncfusion -description: Checkout and learn here all about getting started with Syncfusion Essential Angular Spreadsheet component, it's elements, and more details. +description: Checkout and learn about Getting started with Angular Spreadsheet component of Syncfusion Essential JS 2 and more details. +control: Getting started platform: document-processing -control: Getting started documentation: ug --- -# Getting started with Angular Spreadsheet component +# Getting Started with React Spreadsheet component -This section explains the steps to create a simple Spreadsheet component with basic features in an Angular environment. - -To get start quickly with Angular Spreadsheet using CLI, you can check on this video: - -{% youtube "https://www.youtube.com/watch?v=2Ozwe37X-7Q" %} +This section explains how to create a simple Angular application and add the [Syncfusion® Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) component with the minimum required setup. ## Prerequisites Ensure your development environment meets the [`System Requirements for Syncfusion® Angular Spreadsheet component`](https://help.syncfusion.com/document-processing/system-requirements). -## Dependencies - -The following list of dependencies are required to use the Spreadsheet component in your application. - -```js - |-- @syncfusion/ej2-angular-spreadsheet - |-- @syncfusion/ej2-angular-base - |-- @syncfusion/ej2-spreadsheet - |-- @syncfusion/ej2-base - |-- @syncfusion/ej2-dropdowns - |-- @syncfusion/ej2-navigations - |-- @syncfusion/ej2-grids -``` - ## Setup Angular Environment You can use [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications. To install Angular CLI use the following command. @@ -119,10 +101,9 @@ The above command does the following configuration to your Angular app, >Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning. -## Adding CSS reference +## Add CSS references -The following CSS files are available in `../node_modules/@syncfusion` package folder. -This can be referenced in `[src/styles.css]` using following code. +Add the following style references to the `src/App.css` file. ```css @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @@ -133,8 +114,8 @@ This can be referenced in `[src/styles.css]` using following code. @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css'; @import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css'; ``` ## Add Spreadsheet component @@ -181,6 +162,12 @@ The following example shows a basic Spreadsheet component > You can refer to our [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Angular Spreadsheet example](https://document.syncfusion.com/demos/spreadsheet-editor/angular/#/bootstrap5/spreadsheet/default) that shows you how present and manipulate data, including editing, formulas, formatting, importing, and exporting. +## Video tutorial + +To get started quickly with Angular Spreadsheet, you can watch this video: + +{% youtube "https://www.youtube.com/watch?v=3Cx9AnKAHdY" %} + ## See Also * [Data Binding](./data-binding) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/how-to-overview.md b/Document-Processing/Excel/Spreadsheet/Angular/how-to-overview.md new file mode 100644 index 0000000000..a0523574cb --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/how-to-overview.md @@ -0,0 +1,22 @@ +--- +layout: post +title: Overview Section for How‑to Guides in Angular Spreadsheet | Syncfusion +description: In this section, you can find answers to frequently asked questions and solutions for common scenarios in the Spreadsheet control. +platform: document-processing +control: Spreadsheet +documentation: ug +--- + +# Angular Spreadsheet – How-to Guides Overview + +Explore practical solutions and tips for working with the Syncfusion Angular Spreadsheet component. The guides below cover a variety of common scenarios, helping you implement, customize, and get the most out of your spreadsheet features. + +## How-to Articles + +- [How to change active sheet when importing Angular Spreadsheet?](./how-to/change-active-sheet.md) +- [How to Create a object structure?](./how-to/create-a-object-structure.md) +- [How to add interactive context menu?](./how-to/identify-the-context-menu-opened.md) + +## See Also + +- [Getting Started with Angular Spreadsheet](./getting-started) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-aws-s3-bucket.md new file mode 100644 index 0000000000..9d9669737b --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-aws-s3-bucket.md @@ -0,0 +1,176 @@ +--- +layout: post +title: Opening excel from AWS S3 in Angular Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from AWS S3 in Angular Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: document-processing +control: Open file from AWS S3 +documentation: ug +--- + +# Open file from AWS S3 + +To load a file from AWS S3 in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Amazon; +using Amazon.Runtime; +using Amazon.S3; +using Amazon.S3.Model; +using Amazon.S3.Transfer; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +private IConfiguration _configuration; +public readonly string _accessKey; +public readonly string _secretKey; +public readonly string _bucketName; + +public SpreadsheetController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) +{ + _hostingEnvironment = hostingEnvironment; + _cache = cache; + _configuration = configuration; + _accessKey = _configuration.GetValue("AccessKey"); + _secretKey = _configuration.GetValue("SecretKey"); + _bucketName = _configuration.GetValue("BucketName"); +} + +``` + +5. Create the `OpenFromS3()` method to open the document from the AWS S3 bucket. + +```csharp + +[Route("api/[controller]")] +[ApiController] +public class SpreadsheetController : ControllerBase +{ + [HttpPost] + [Route("OpenFromS3")] + public async Task OpenFromS3([FromBody] FileOptions options) + { + try + { + //Set AWS region and credentials + var region = RegionEndpoint.USEast1; + var config = new AmazonS3Config { RegionEndpoint = region }; + var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey"); + //Create an S3 client to interact with AWS + using (var client = new AmazonS3Client(credentials, config)) + { + using (MemoryStream stream = new MemoryStream()) + { + //Get the full file name using input from the client + string bucketName = "your-bucket-name"; + string fileName = options.FileName + options.Extension; + //Download the file from S3 into memory + var response = await client.GetObjectAsync(new GetObjectRequest + { + BucketName = bucketName, + Key = fileName + }); + await response.ResponseStream.CopyToAsync(stream); + stream.Position = 0; // Reset stream position for reading + //Wrap the stream as a FormFile for processing + OpenRequest open = new OpenRequest + { + File = new FormFile(stream, 0, stream.Length, options.FileName, fileName) + }; + //Convert Excel file to JSON using Workbook.Open method. + var result = Workbook.Open(open); + //Return the JSON result to the client + return Content(result, "application/json"); + } + } + } + catch (Exception ex) + { + // Handle any errors and return a message + Console.WriteLine($"Error: {ex.Message}"); + return Content("Error occurred while processing the file."); + } + } + + // To receive file details from the client. + public class FileOptions + { + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; + } +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration. + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "AccessKey": "Your Access Key from AWS S3", + "SecretKey": "Your Secret Key from AWS S3", + "BucketName": "Your Bucket name from AWS S3" +} + +``` + +N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name. + +**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the AWS S3 bucket into the client-side spreadsheet. + +```ts + + + +// Function to open a spreadsheet file from AWS S3 via an API call +openFromS3() { + this.spreadsheetObj.showSpinner(); + // Make a POST request to the backend API to fetch the file from S3. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + FileName: fileInfo.name, // Name of the file to open + Extension: fileInfo.extension, // File extension + }), + }) + .then((response) => response.json()) // Parse the response as JSON + .then((data) => { + this.spreadsheetObj.hideSpinner(); + // Load the spreadsheet data into the UI. + this.spreadsheetObj.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((error) => { + // Log any errors that occur during the fetch operation + window.alert('Error importing file:', error); + }); + }; + +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-azure-blob-storage.md b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-azure-blob-storage.md new file mode 100644 index 0000000000..a23c5fa29b --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-azure-blob-storage.md @@ -0,0 +1,158 @@ +--- +layout: post +title: Open excel from Azure Blob in Angular Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from Azure Blob Storage in Angular Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Open file from Azure Blob Storage +documentation: ug +--- + +# Open file from Azure Blob Storage + +To load a file from Azure Blob Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in React + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using System; +using System.IO; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Http; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.Configuration; +using Syncfusion.EJ2.Spreadsheet; +using Azure.Storage.Blobs; +using Azure.Storage.Blobs.Specialized; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +private readonly string _storageConnectionString; +private readonly string _storageContainerName; + +public SpreadsheetController(IConfiguration configuration) +{ + // Fetch values from appsettings.json + _storageConnectionString = configuration.GetValue("connectionString"); + _storageContainerName = configuration.GetValue("containerName"); +} + +``` + +5. Create the `OpenFromAzure()` method to open the document from the Azure Blob Storage. + +```csharp + +[HttpPost] +[Route("OpenFromAzure")] +public async Task OpenFromAzure([FromBody] FileOptions options) +{ + if (options == null || string.IsNullOrWhiteSpace(options.FileName) || string.IsNullOrWhiteSpace(options.Extension)) + return BadRequest("Invalid file options."); + + try + { + using (MemoryStream stream = new MemoryStream()) + { + string fileName = options.FileName + options.Extension; + + // Connect to Azure Blob Storage + BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString); + BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName); + BlockBlobClient blockBlobClient = containerClient.GetBlockBlobClient(fileName); + + // Download file into memory + await blockBlobClient.DownloadToAsync(stream); + stream.Position = 0; + + // Wrap stream as FormFile and convert to Spreadsheet-compatible JSON + OpenRequest open = new OpenRequest + { + File = new FormFile(stream, 0, stream.Length, options.FileName, fileName) + }; + + string result = Workbook.Open(open); + return Content(result, "application/json"); + } + } + catch (Exception ex) + { + Console.WriteLine($"Error: {ex.Message}"); + return Content("Error occurred while processing the file."); + } +} + +// DTO that receives file details from the client +public class FileOptions +{ + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration. + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "connectionString": "DefaultEndpointsProtocol=https;AccountName=yourAccount;AccountKey=yourKey;EndpointSuffix=core.windows.net", + "containerName": "your-container-name" +} + +``` +N> Note: Install the Azure.Storage.Blobs NuGet package in the service project. + +**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the Google Cloud Storage into the client-side spreadsheet. + +```ts + + + +openFromAzure() { + this.spreadsheetObj.showSpinner(); + // Make a POST request to the backend API to fetch the file from Azure. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + FileName: fileInfo.name, // Name of the file to open + Extension: fileInfo.extension, // File extension + }), + }) + .then((response) => response.json()) // Parse the response as JSON + .then((data) => { + this.spreadsheetObj.hideSpinner(); + // Load the spreadsheet data into the UI. + this.spreadsheetObj.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((error) => { + // Log any errors that occur during the fetch operation + window.alert('Error importing file:', error); + }); +}; + +``` \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-cloud-storage.md b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-cloud-storage.md new file mode 100644 index 0000000000..3fffc2f567 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-cloud-storage.md @@ -0,0 +1,150 @@ +--- +layout: post +title: Open excel from Google Cloud in Angular Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from Google Cloud Storage in Angular Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Open file from Google Cloud Storage +documentation: ug +--- + +# Open file from Google Cloud Storage + +To load a file from Google Cloud Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in React + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Cloud.Storage.V1; +using Syncfusion.EJ2.Spreadsheet; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```Csharp + +private readonly string _bucketName; +private readonly StorageClient _storageClient; + +public SpreadsheetController(IConfiguration configuration) +{ + // Path of the JSON key downloaded from Google Cloud + string keyFilePath = configuration.GetValue("GoogleKeyFilePath"); + + // Create StorageClient with service-account credentials + var credentials = GoogleCredential.FromFile(keyFilePath); + _storageClient = StorageClient.Create(credentials); + + // Bucket that stores the Excel files + _bucketName = configuration.GetValue("BucketName"); +} + +``` + +5. Create the `OpenFromGoogleCloud()` method to open the document from the Google Cloud Storage. + +```Csharp + +[HttpPost] +[Route("OpenFromGoogleCloud")] +public IActionResult OpenFromGoogleCloud([FromBody] FileOptions options) +{ + try + { + using MemoryStream stream = new MemoryStream(); + + // / + string fileName = options.FileName + options.Extension; + + // Download the object into memory + _storageClient.DownloadObject(_bucketName, fileName, stream); + stream.Position = 0; + + // Feed the stream to Syncfusion to convert it into JSON + OpenRequest open = new OpenRequest + { + File = new FormFile(stream, 0, stream.Length, options.FileName, fileName) + }; + + string result = Workbook.Open(open); + return Content(result, "application/json"); + } + catch (Exception ex) + { + Console.WriteLine($"Error: {ex.Message}"); + return Content("Error occurred while processing the file."); + } +} + +// DTO that receives file details from the client +public class FileOptions +{ + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration. + +```Json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "GoogleKeyFilePath": "path/to/service-account-key.json", + "BucketName": "your-gcs-bucket-name" +} + +``` + +N> Note: Install the Google.Cloud.Storage.V1 NuGet package in the service project. + +**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the Google Cloud Storage into the client-side spreadsheet. + +```ts + + + +openFromAzure() { + this.spreadsheetObj.showSpinner(); + // Make a POST request to the backend API to fetch the file from Google Cloud Storage. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + FileName: fileInfo.name, // Name of the file to open + Extension: fileInfo.extension, // File extension + }), + }) + .then((response) => response.json()) // Parse the response as JSON + .then((data) => { + this.spreadsheetObj.hideSpinner(); + // Load the spreadsheet data into the UI. + this.spreadsheetObj.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((error) => { + // Log any errors that occur during the fetch operation + window.alert('Error importing file:', error); + }); +}; +``` \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-drive.md b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-drive.md new file mode 100644 index 0000000000..77628777da --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-drive.md @@ -0,0 +1,185 @@ +--- +layout: post +title: Open excel from Google Drive in React Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from Google Drive in React Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Open file from Google Drive +documentation: ug +--- + +# Open file from Google Drive + +To load a file from Google Drive in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Set up Google Drive API + +You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/workspace/drive/api/guides/enable-sdk). + +**Step 2:** Create a Simple Spreadsheet Sample in React + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. + +**Step 3:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +* Open the `SpreadsheetController.cs` file in your web service project. + +* Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Apis.Drive.v3; +using Google.Apis.Services; +using Syncfusion.EJ2.Spreadsheet; + +``` + +* Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +//variables for storing GDrive folderId, ApplicationName and Service-Accountkey credentials +public readonly string folderId; +public readonly string applicationName; +public readonly string credentialPath; + +//constructor for assigning credentials +public SpreadsheetController(IConfiguration configuration) +{ + folderId = configuration.GetValue("FolderId"); + credentialPath = configuration.GetValue("CredentialPath"); + applicationName = configuration.GetValue("ApplicationName"); +} + +``` + +* Create the `OpenExcelFromGoogleDrive()` method to open the document from the Google Drive. + +```csharp + +[HttpPost] +[Route("OpenExcelFromGoogleDrive")] +public async Task OpenExcelFromGoogleDrive([FromBody] FileOptions options) +{ +try +{ + // Create a memory stream to store file data + MemoryStream stream = new MemoryStream(); + + // Authenticate using Service Account + GoogleCredential credential; + // Load Google service account credentials + using (var streamKey = new FileStream(credentialPath, FileMode.Open, FileAccess.Read)) + { + credential = GoogleCredential.FromStream(streamKey) + .CreateScoped(DriveService.Scope.Drive); + } + + // Create Google Drive API service + var service = new DriveService(new BaseClientService.Initializer() + // Initialize Google Drive API client + { + HttpClientInitializer = credential, + ApplicationName = applicationName, + }); + + // List Excel files in Google Drive folder + var listRequest = service.Files.List(); + // Query Google Drive for Excel, CSV files in the specified folder + listRequest.Q = $"(mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' or mimeType='application/vnd.ms-excel' or mimeType='text/csv') and '{folderId}' in parents and trashed=false"; + listRequest.Fields = "files(id, name)"; + var files = await listRequest.ExecuteAsync(); + // Find the requested file + string fileIdToDownload = files.Files.FirstOrDefault(f => f.Name == options.FileName + options.Extension)?.Id; + // Get the file ID for the requested file name + if (string.IsNullOrEmpty(fileIdToDownload)) + // Get the file ID for the requested file name + return NotFound("File not found in Google Drive."); + // Download the file + var request = service.Files.Get(fileIdToDownload); + await request.DownloadAsync(stream); + // Download file content into memory stream + stream.Position = 0; + // Prepare file for Syncfusion Excel processing + OpenRequest open = new OpenRequest + // Wrap downloaded stream as FormFile for Syncfusion processing + { + File = new FormFile(stream, 0, stream.Length, options.FileName, options.FileName + options.Extension) + }; + + // Convert Excel file to JSON using Syncfusion XlsIO + var result = Workbook.Open(open); + return Content(result, "application/json"); +} +catch (Exception ex) +{ + return BadRequest("Error occurred while processing the file: " + ex.Message); +} +} + +// Class to store FileOptions +public class FileOptions +{ + public string FileName { get; set; } = string.Empty; + public string Extension { get; set; } = string.Empty; +} + +``` + +* Open the `appsettings.json` file in your web service project, add your Google Drive configuration details. + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "CredentialPath": "path-to-your-service-account-key.json", + "FolderId": "your-google-drive-folder-id", + "ApplicationName": "YourAppName" +} + +``` + +N> Replace the **credential path**, **folderId** and **application name** in json file with your actual Google drive folder ID , your name for your application and the path for the JSON file. + +**Step 4:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and process the Excel file from the Google Drive and load the JSON result into the client-side spreadsheet using the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method. + +```typescript + + +openFromGoogleDrive() { + this.spreadsheetObj.showSpinner(); + // Make a POST request to the backend API to fetch the file from Google Drive. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + FileName: fileInfo.name, // Name of the file to open + Extension: fileInfo.extension, // File extension + }), + }) + .then((response) => response.json()) // Parse the response as JSON + .then((data) => { + this.spreadsheetObj.hideSpinner(); + // Load the spreadsheet data into the UI. + this.spreadsheetObj.openFromJson({ file: data, triggerEvent: true }); + }) + .catch((error) => { + // Log any errors that occur during the fetch operation + window.alert('Error importing file:', error); + }); +}; +``` + +N> The Google.Apis.Drive.v3 NuGet package must be installed in your application to use the previous code example. + +[View sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-react-spreadsheet-google-drive-integration) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-aws-s3-bucket.md b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-aws-s3-bucket.md new file mode 100644 index 0000000000..9b34ebed6f --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-aws-s3-bucket.md @@ -0,0 +1,162 @@ +--- +layout: post +title: Saving excel to AWS S3 in Angular Spreadsheet control | Syncfusion +description: Learn how to save a Excel file from AWS S3 in Angular Spreadsheet control of Syncfusion Essential JS 2 and more details. +platform: document-processing +control: Save file to AWS S3 +documentation: ug +--- + +# Save spreadsheet to AWS S3 + +To save a file to the AWS S3, you can follow the steps below. + +**Step 1:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Amazon; +using Amazon.Runtime; +using Amazon.S3; +using Amazon.S3.Model; +using Amazon.S3.Transfer; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields + +```csharp + +private IConfiguration _configuration; +public readonly string _accessKey; +public readonly string _secretKey; +public readonly string _bucketName; + +public SpreadsheetController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) +{ + _hostingEnvironment = hostingEnvironment; + _cache = cache; + _configuration = configuration; + _accessKey = _configuration.GetValue("AccessKey"); + _secretKey = _configuration.GetValue("SecretKey"); + _bucketName = _configuration.GetValue("BucketName"); +} + +``` + +5. Create the `SaveToS3()` method to open the document from the AWS S3 bucket + +```csharp + +[HttpPost] +[Route("SaveToS3")] +public async Task SaveToS3([FromForm] SaveSettings saveSettings) +{ + try + { + // Convert spreadsheet JSON to Excel file stream + Stream fileStream = Workbook.Save(saveSettings); + fileStream.Position = 0; // Reset stream for upload + + // Set AWS region and credentials + var region = RegionEndpoint.USEast1; + var config = new AmazonS3Config { RegionEndpoint = region }; + var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey"); + + // Define S3 bucket and file name + string bucketName = "your-bucket-name"; + string fileName = saveSettings.FileName + "." + saveSettings.SaveType.ToString().ToLower(); + + // Initialize S3 client + using (var client = new AmazonS3Client(credentials, config)) + { + // Use TransferUtility to upload the file stream + var fileTransferUtility = new TransferUtility(client); + await fileTransferUtility.UploadAsync(fileStream, bucketName, fileName); + } + + // Return success message + return Ok("Excel file successfully saved to AWS S3."); + } + catch (Exception ex) + { + } +} + +``` + +6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration + +```json + +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "AccessKey": "Your Access Key from AWS S3", + "SecretKey": "Your Secret Key from AWS S3", + "BucketName": "Your Bucket name from AWS S3" +} + +``` + +N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name + +**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end + +```ts + + + +// Function to save the current spreadsheet to AWS S3 via an API call +saveToS3() { + // Convert the current spreadsheet to JSON format + this.spreadsheetObj.saveAsJson().then((json) => { + const formData = new FormData(); + + // Append necessary data to the form for the API request + formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save + formData.append('saveType', loadedFileInfo.saveType); // Save type + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings + ); + + // Make a POST request to the backend API to save the file to S3. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/SaveToS3', { + method: 'POST', + body: formData, + }) + .then((response) => { + // Check if the response is successful + if (!response.ok) { + throw new Error( + `Save request failed with status ${response.status}` + ); + } + window.alert('Workbook saved successfully.'); + }) + .catch((error) => { + // Log any errors that occur during the save operation + window.alert('Error saving to server:', error); + }); + }); +}; +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-azure-blob-storage.md b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-azure-blob-storage.md new file mode 100644 index 0000000000..e77f1cead5 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-azure-blob-storage.md @@ -0,0 +1,133 @@ +--- +layout: post +title: Save excel to Azure Blob in Angular Spreadsheet control | Syncfusion +description: Learn about how to Save an Excel file from Azure Blob Storage in Angular Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Save file to Azure Blob Storage +documentation: ug +--- + +# Save file to Azure Cloud Storage + +To save a file to Azure Blob Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using System; +using System.IO; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.Configuration; +using Syncfusion.EJ2.Spreadsheet; +using Azure.Storage.Blobs; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +private readonly string _storageConnectionString; +private readonly string _storageContainerName; + +public SpreadsheetController(IConfiguration configuration) +{ + _storageConnectionString = configuration.GetValue("connectionString"); + _storageContainerName = configuration.GetValue("containerName"); +} + +``` + +5. Create the `SaveToAzure()` method to save the document to the Azure Blob storage. + +```csharp + +[HttpPost] +[Route("SaveToAzure")] +public async Task SaveToAzure([FromForm] SaveSettings saveSettings) +{ + if (saveSettings == null || string.IsNullOrWhiteSpace(saveSettings.FileName)) + return BadRequest("Invalid save settings."); + + try + { + // Convert spreadsheet JSON to Excel/PDF/CSV stream + Stream fileStream = Workbook.Save(saveSettings); + fileStream.Position = 0; + + // Define Azure Blob Storage client + BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString); + BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName); + + // Define blob name using file name and save type + string blobName = $"{saveSettings.FileName}.{saveSettings.SaveType.ToString().ToLower()}"; + BlobClient blobClient = containerClient.GetBlobClient(blobName); + + // Upload the Excel file stream to Azure Blob Storage (overwrite if exists) + await blobClient.UploadAsync(fileStream, overwrite: true); + + return Ok("Excel file successfully saved to Azure Blob Storage."); + } + catch (Exception ex) + { + return BadRequest("Error saving file to Azure Blob Storage: " + ex.Message); + } +} + +``` + +N> Note: Install the Azure.Storage.Blobs NuGet package in the service project. Ensure the configured connection string has permissions to read and write blobs in the specified container. + +**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end + +```ts + + + +saveToAzure() { + // Convert the current spreadsheet to JSON format + this.spreadsheetObj.saveAsJson().then((json) => { + const formData = new FormData(); + + // Append necessary data to the form for the API request + formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save + formData.append('saveType', loadedFileInfo.saveType); // Save type + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings + ); + + // Make a POST request to the backend API to save the file to Azure-blog storage. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/SaveToAzure', { + method: 'POST', + body: formData, + }) + .then((response) => { + // Check if the response is successful + if (!response.ok) { + throw new Error( + `Save request failed with status ${response.status}` + ); + } + window.alert('Workbook saved successfully.'); + }) + .catch((error) => { + // Log any errors that occur during the save operation + window.alert('Error saving to server:', error); + }); + }); +}; +``` \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-cloud-storage.md b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-cloud-storage.md new file mode 100644 index 0000000000..5fa90963bc --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-cloud-storage.md @@ -0,0 +1,124 @@ +--- +layout: post +title: Save excel to Google Cloud in React Spreadsheet control | Syncfusion +description: Learn about how to Save an Excel file from Google Cloud Storage in React Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Save file to Google Cloud Storage +documentation: ug +--- + +# Save file to Google Cloud Storage + +To save a file to Google Cloud Storage in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Create a Simple Spreadsheet Sample in React + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. + +**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +2. Open the `SpreadsheetController.cs` file in your web service project. + +3. Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Cloud.Storage.V1; +using Syncfusion.EJ2.Spreadsheet; + +``` + +4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp +private readonly string _bucketName; +private readonly StorageClient _storageClient; + +public SpreadsheetController(IConfiguration configuration) +{ + // Path of the JSON key downloaded from Google Cloud + string keyFilePath = configuration.GetValue("GoogleKeyFilePath"); + + // Create StorageClient with service-account credentials + var credentials = GoogleCredential.FromFile(keyFilePath); + _storageClient = StorageClient.Create(credentials); + + // Bucket that stores the Excel files + _bucketName = configuration.GetValue("BucketName"); +} +``` + +5. Create the `SaveToGoogleCloud()` method to save the document to the Google Cloud storage. + +```csharp +[HttpPost] +[Route("SaveToGoogleCloud")] +public async Task SaveToGoogleCloud([FromForm] SaveSettings saveSettings) +{ + try + { + // Convert spreadsheet JSON to Excel stream + Stream fileStream = Workbook.Save(saveSettings); + fileStream.Position = 0; + + // File name inside the bucket + string fileName = $"{saveSettings.FileName}.{saveSettings.SaveType.ToString().ToLower()}"; + + // Upload the stream to Google Cloud Storage + await _storageClient.UploadObjectAsync(_bucketName, fileName, null, fileStream); + + return Ok("Excel file successfully saved to Google Cloud Storage."); + } + catch (Exception ex) + { + return BadRequest("Error saving file to Google Cloud Storage: " + ex.Message); + } +} +``` + +**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end + +```ts + + + +saveToGoogleCloud() { + // Convert the current spreadsheet to JSON format + this.spreadsheetObj.saveAsJson().then((json) => { + const formData = new FormData(); + + // Append necessary data to the form for the API request + formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save + formData.append('saveType', loadedFileInfo.saveType); // Save type + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings + ); + + // Make a POST request to the backend API to save the file to Google storage. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/SaveToGoogleCloud', { + method: 'POST', + body: formData, + }) + .then((response) => { + // Check if the response is successful + if (!response.ok) { + throw new Error( + `Save request failed with status ${response.status}` + ); + } + window.alert('Workbook saved successfully.'); + }) + .catch((error) => { + // Log any errors that occur during the save operation + window.alert('Error saving to server:', error); + }); + }); +}; +``` + +N> Note: The back-end requires the Google.Cloud.Storage.V1 NuGet package and a service-account key that has Storage Object Admin (or equivalent) permissions on the target bucket. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-drive.md b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-drive.md new file mode 100644 index 0000000000..a693936864 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-drive.md @@ -0,0 +1,201 @@ +--- +layout: post +title: Save excel to Google Drive in Angular Spreadsheet control | Syncfusion +description: Learn about how to Save an Excel file to Google Drive from React Spreadsheet control of Syncfusion Essential JS 2. +platform: document-processing +control: Save file to Google Drive +documentation: ug +--- + +# Save file to Google Drive + +To save a file to Google Drive in a Spreadsheet Component, you can follow the steps below + +**Step 1:** Set up Google Drive API + +You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/workspace/drive/api/guides/enable-sdk). + +**Step 2:** Create a Simple Spreadsheet Sample in Angular + +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. + +**Step 3:** Modify the `SpreadsheetController.cs` File in the Web Service Project + +* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project. + +* Open the `SpreadsheetController.cs` file in your web service project. + +* Import the required namespaces at the top of the file: + +```csharp + +using Google.Apis.Auth.OAuth2; +using Google.Apis.Drive.v3; +using Google.Apis.Services; +using Syncfusion.EJ2.Spreadsheet; + +``` + +* Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields. + +```csharp + +//variables for storing GDrive folderId, ApplicationName and Service-Accountkey credentials +public readonly string folderId; +public readonly string applicationName; +public readonly string credentialPath; + +//constructor for assigning credentials +public SpreadsheetController(IConfiguration configuration) +{ + folderId = configuration.GetValue("FolderId"); + credentialPath = configuration.GetValue("CredentialPath"); + applicationName = configuration.GetValue("ApplicationName"); +} + +``` + +* Create the `SaveExcelToGoogleDrive()` method to save the document to the Google Drive. + +```csharp + +[HttpPost] +[Route("SaveExcelToGoogleDrive")] +public async Task SaveExcelToGoogleDrive([FromForm] SaveSettings saveSettings) +{ + try + { + //Generate Excel file stream using Syncfusion + Stream generatedStream = Workbook.Save(saveSettings); + //Copy to MemoryStream to ensure full content is flushed and seekable + MemoryStream excelStream = new MemoryStream(); + // Copy generated stream to MemoryStream for upload + await generatedStream.CopyToAsync(excelStream); + excelStream.Position = 0; // Reset position for upload + // Prepare file name with extension based on SaveType + string fileName = saveSettings.FileName + "." + saveSettings.SaveType.ToString().ToLower(); + // Validate service account credential file + if (!System.IO.File.Exists(credentialPath)) + throw new FileNotFoundException($"Service account key file not found at {credentialPath}"); + //Authenticate using Service Account credentials + GoogleCredential credential; + // Load Google service account credentials + using (var streamKey = new FileStream(credentialPath, FileMode.Open, FileAccess.Read)) + { + credential = GoogleCredential.FromStream(streamKey) + .CreateScoped(DriveService.Scope.Drive); + } + //Initialize Google Drive API service + var service = new DriveService(new BaseClientService.Initializer() + // Initialize Google Drive API client + { + HttpClientInitializer = credential, + ApplicationName = applicationName, + }); + //Prepare file metadata + var fileMetadata = new Google.Apis.Drive.v3.Data.File() + { + Name = fileName + }; + //Check if file already exists in the specified folder + var listRequest = service.Files.List(); + listRequest.Q = $"name='{fileName}' and trashed=false"; + // Query Google Drive for Excel, CSV files in the specified folder + listRequest.Fields = "files(id)"; + var files = await listRequest.ExecuteAsync(); + // Reset stream position before upload (important for both update and create) + excelStream.Position = 0; + // Set MIME type dynamically based on SaveType + string mimeType = saveSettings.SaveType switch + { + SaveType.Xlsx => "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", + SaveType.Xls => "application/vnd.ms-excel", + SaveType.Csv => "text/csv", + }; + + if (files.Files.Any()) + { + // If File exists Update in the existing file + var updateRequest = service.Files.Update(fileMetadata, files.Files[0].Id, excelStream, mimeType); + updateRequest.Fields = "id"; + await updateRequest.UploadAsync(); + } + else + { + // If File does not exist, Create new file + var createRequest = service.Files.Create(fileMetadata, excelStream,mimeType); + createRequest.Fields = "id"; + await createRequest.UploadAsync(); + } + return Ok("Excel file successfully saved/updated in Google Drive."); + } + catch (Exception ex) + { + return BadRequest("Error saving file to Google Drive: " + ex.Message); + } +} + +``` + +* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration + +```json +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*", + "CredentialPath": "path-to-your-service-account-key.json", + "FolderId": "your-google-drive-folder-id", + "ApplicationName": "YourAppName" +} +``` + +N> Replace the **credential path**, **folderId** and **application name** in json file with your actual Google drive folder ID , your name for your application and the path for the JSON file. + +**Step 4:** Modify the index file in the Spreadsheet sample to save the Spreadsheet as JSON data using the [`saveAsJson`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveasjson) method and send the saved JSON to the server via fetch call. + +```ts + + +// Save the current spreadsheet to Google Drive +saveToGoogleDrive() { + // Convert the current spreadsheet to JSON format + this.spreadsheetObj.saveAsJson().then((json) => { + const formData = new FormData(); + + // Append necessary data to the form for the API request + formData.append('FileName', loadedFileInfo.fileName); // Name of the file to save + formData.append('saveType', loadedFileInfo.saveType); // Save type + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); // Spreadsheet data + formData.append( + 'PdfLayoutSettings', + JSON.stringify({ FitSheetOnOnePage: false }) // PDF layout settings + ); + + // Make a POST request to the backend API to save the file to Google storage. Replace the URL with your local or hosted endpoint URL. + fetch('https://localhost:portNumber/api/spreadsheet/SaveToGoogleDrive', { + method: 'POST', + body: formData, + }) + .then((response) => { + // Check if the response is successful + if (!response.ok) { + throw new Error( + `Save request failed with status ${response.status}` + ); + } + window.alert('Workbook saved successfully.'); + }) + .catch((error) => { + // Log any errors that occur during the save operation + window.alert('Error saving to server:', error); + }); + }); +}; +``` + +N> The Google.Apis.Drive.v3 NuGet package must be installed in your application to use the previous code example. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md new file mode 100644 index 0000000000..1ca888caed --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md @@ -0,0 +1,91 @@ +--- +layout: post +title: Deploy Spreadsheet Server to Azure App Service using CLI | Syncfusion +description: Learn how to deploy the Syncfusion Spreadsheet Server Docker image to Azure App Service using Azure CLI. +control: How to deploy Spreadsheet Server Docker Image to Azure App Service using Azure CLI +platform: document-processing +documentation: ug +--- + +# Deploy Spreadsheet Docker to Azure App Service using Azure CLI + +## Prerequisites + +* `Docker` installed on your machine (Windows, macOS, or Linux). +* `Azure CLI` installed based on your operating system. [Download Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli) +* An active [`Azure subscription`](https://azure.microsoft.com/en-gb) with App Services access. +* The [`Spreadsheet Server Docker image`](https://hub.docker.com/r/syncfusion/spreadsheet-server) available. + +## Deploy to Azure App Service using Azure CLI + +**Step 1:** Log in to Azure + +Open your terminal and sign in to Azure using the command below. This authenticates your CLI with Azure. + +```bash +az login +``` + +**Step 2:** Create a resource group + +Create a resource group with the following command in your preferred location. + +```bash +az group create --name < your-app-name> --location +``` + +**Step 3:** Create an app service plan + +Create a resource group with the following command in your preferred location. + +```bash +az appservice plan create --name --resource-group < your-resource-group> --sku S1 --is-linux +``` + +This creates an App Service plan in the standard pricing tier (S1) and ensures it runs on Linux containers with the --is-linux flag. + +**Step 4:** Create the docker-compose.yml file + +Define your container configuration in a docker-compose.yml file. This file specifies the container name, image, and environment variables for the Spreadsheet Server: + +```bash +version: '3.4' + +services: + spreadsheet-server: + image: syncfusion/spreadsheet-server + environment: + + # Provide your license key for activation + SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY + ports: + - "6002:8080" + +``` + +Note: Replace YOUR_LICENSE_KEY with your valid Syncfusion license key. + +**Step 5:** Create a Docker compose app + +Deploy the containerized app to Azure App Service using the following command. + +```bash +az webapp create --resource-group --plan < your-app-service-plan> --name --multicontainer-config-type compose --multicontainer-config-file docker-compose.yml +``` + +This command creates a web app that runs your Spreadsheet Server Docker container using the configuration defined in the docker-compose.yml file. + +**Step 6:** Browse your app + +Once deployed, your app will be live at https://XXXXXXXXXX.azurewebsites.net. + +![azure cli](../images/azure-cli.png) + +**Step 7:** With your server running, verify that it supports import and export operations by testing the following endpoints: +``` +openUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/open" +saveUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/save +``` +Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started.md) + +For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md new file mode 100644 index 0000000000..48fdc9810f --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/deploy-spreadsheet-server-to-aws-eks-using-docker.md @@ -0,0 +1,137 @@ +--- +layout: post +title: Deploy Spreadsheet Docker to AWS EKS Cluster | Syncfusion +description: Learn how to deploy the Syncfusion Spreadsheet server Docker image to AWS EKS and connect it to the Angular Spreadsheet component. +control: How to deploy spreadsheet server to AWS EKS using Docker +platform: document-processing +documentation: ug +--- + +# How to deploy spreadsheet server to AWS EKS Cluster + +## Prerequisites + +* `AWS account` and [`AWS CLI`](https://aws.amazon.com/cli/) installed and configured. +* [`kubectl`](https://kubernetes.io/docs/tasks/tools/) installed and configured. +* Access to an existing EKS cluster, or you can create one via the AWS console or CLI. +* Docker installed if you plan to build and push a custom image. + +**Step 1:** Configure your environment +* Open a terminal and authenticate to AWS + +```bash + +aws configure # enter your Access Key, Secret Key, region, and output format (e.g., json) + +``` +* Update your kubectl context to point to the EKS cluster: + +```bash + +aws eks update-kubeconfig --region --name + +``` +* After updating the [`kubeconfig`](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/) with the EKS cluster, you can verify the node’s state. + +```bash + +kubectl get nodes # verify that your cluster nodes are ready + +``` + +**Step 2:** Create the Deployment +Create a file named spreadsheet-deployment.yaml defining a deployment for the Syncfusion® container. The container listens on port `8080`: + +```yaml + +apiVersion: apps/v1 +kind: Deployment +metadata: + name: spreadsheet-server + labels: + app: spreadsheet-server +spec: + replicas: 1 # Increase to 2 or more for higher availability + selector: + matchLabels: + app: spreadsheet-server + template: + metadata: + labels: + app: spreadsheet-server + spec: + containers: + - name: spreadsheet-server + image: syncfusion/spreadsheet-server:latest + ports: + - containerPort: 8080 + env: + - name: SYNCFUSION_LICENSE_KEY + value: "YOUR_LICENSE_KEY" + +``` + +> If you build a custom image, push it to Docker Hub or AWS ECR and update `image:` field accordingly. + +**Step 3:** Expose the Service +Create a `spreadsheet-service.yaml` to define a Service of type `LoadBalancer` that forwards traffic to the container. Customize the external port (5000) as needed; the internal `targetPort` should remain 8080 because the container listens on that port. + +```yaml + +apiVersion: v1 +kind: Service +metadata: + name: spreadsheet-server-service +spec: + selector: + app: spreadsheet-server + type: LoadBalancer + ports: + - protocol: TCP + port: 5000 # External port exposed by the load balancer + targetPort: 8080 # Internal container port + +``` + +**Step 4:** Deploy to EKS +* Apply the manifests: + +```bash + +kubectl apply -f spreadsheet-deployment.yaml +kubectl apply -f spreadsheet-service.yaml + +``` + +* Use the kubectl get pods command to monitor pod status. To retrieve the external address, run: + +```bash + +kubectl get svc spreadsheet-server-service + +``` + +* Retrieve the external address from the Service output. Use `https://` only if the Load Balancer is configured with TLS (use ACM for certificates). + +**Step 5:** Configure the Angular client + +Start by following the steps provided in this [link](../getting-started.md) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. Once the Service reports an external address (e.g., a1b2c3d4e5f6-1234567890.us-east-1.elb.amazonaws.com), update the [`openUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveurl) properties of your Angular Spreadsheet component: + +```ts + + +``` + +> Use `https://` if your Load Balancer has TLS configured. + +**Step 6:** Scaling and customization +- `Scale replicas:` To handle a higher workload, you can scale your deployment by increasing the replicas count in your `spreadsheet-deployment.yaml` file and then run `kubectl apply -f spreadsheet-deployment.yaml` to apply the changes. Kubernetes will automatically manage the distribution of traffic across the pods. +- `Resource limits:` Define `resources.requests`, and `resources.limits` in the container spec to allocate CPU and memory appropriately. +- `Environment variables:` In addition to SYNCFUSION_LICENSE_KEY, you can set other configuration keys (e.g., culture) using the env: section in the deployment manifest without modifying the docker image. + +For more information on deploying Spreadsheet docker image in Amazon EKS kindly refer to this [`Blog`](https://www.syncfusion.com/blogs/post/spreadsheet-server-eks-deployment) + +## See Also +* [Docker Image Overview in Angular Spreadsheet](./spreadsheet-server-docker-image-overview) +* [Publish Spreadsheet Server to Azure App Service using Visual Studio](./publish-spreadsheet-server-to-azure-using-visual-studio) +* [Deploy Spreadsheet Docker to Azure App Service using Azure CLI](./deploy-spreadsheet-docker-to-azure-using-azure-cli) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md new file mode 100644 index 0000000000..1c50b61223 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md @@ -0,0 +1,57 @@ +--- +layout: post +title: Deploy Spreadsheet Server to Azure App Service via VS | Syncfusion +description: Learn how to publish the Syncfusion Spreadsheet Server Web API to Azure App Service using Visual Studio. +control: How to publish Spreadsheet Server in Azure App Service using Visual Studio +platform: document-processing +documentation: ug +--- + +# Publish Spreadsheet Server to Azure App Service using Visual Studio + + +## Prerequisites + +* `Visual Studio 2022` or later is installed. +* [`.NET 8.0 SDK`](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later installed. +* An active [`Azure subscription`](https://azure.microsoft.com/en-gb) with App Services access. +* The [`Spreadsheet Web API project`](https://github.com/SyncfusionExamples/EJ2-Spreadsheet-WebServices/tree/main/WebAPI) repository cloned locally. + +Make sure you build the project using the Build > Build Solution menu command before following the deployment steps. + +## Publish to Azure App Service + +**Step 1:** In Solution Explorer, right-click the project and click Publish (or use the Build > Publish menu item). + +![azure publish ](../images/azure_publish.png) + +**Step 2:** In the Pick a publish target dialog box, select Azure as deployment target. + +![azure target ](../images/azure_target.png) + +**Step 3:** After selecting Azure, choose Azure App Service under the target options. + +![azure app service](../images/azure_app_service.png) + +**Step 4:** Select Publish. The Create App Service dialog box appears. Sign in with your Azure account, if necessary, and then the default app service settings populate the fields. + +![azure credentials](../images/azure_credentials.png) + +**Step 5:** Select Create. Visual Studio deploys the app to your Azure App Service, and the web app loads in your browser with the app name at, +``` +http://.azurewebsites.net +``` + +![azure_published_window](../images/azure_published_window.png) + +**Step 6:** Once the deployment process is complete, The deployed API will be live at the following URL: +https://XXXXXXXXXX.azurewebsites.net + +**Step 7:** With your server running, verify that it supports import and export operations by testing the following endpoints: +``` +openUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/open" +saveUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/save +``` +Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started.md) + +For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup. \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/spreadsheet-server-docker-image-overview.md b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/spreadsheet-server-docker-image-overview.md new file mode 100644 index 0000000000..d73eb69897 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/server-deployment/spreadsheet-server-docker-image-overview.md @@ -0,0 +1,101 @@ +--- +layout: post +title: Docker image deployment in Angular Spreadsheet component | Syncfusion +description: Learn here all about Docker image deployment in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: Docker deployment +documentation: ug +--- + +# Docker Image Overview in Angular Spreadsheet + +The [**Syncfusion® Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) is a feature-rich control for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, filtering, importing, and exporting Excel documents. + +This Docker image is the pre-defined Docker container for Syncfusion's Spreadsheet back-end functionalities. This server-side Web API project targets ASP.NET Core 8.0. + +You can deploy it quickly to your infrastructure. If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing [Spreadsheet Docker project](https://github.com/SyncfusionExamples/Spreadsheet-Server-Docker). + +The Spreadsheet is supported on the [JavaScript](https://www.syncfusion.com/javascript-ui-controls), [Angular](https://www.syncfusion.com/angular-ui-components), [React](https://www.syncfusion.com/react-ui-components), [Vue](https://www.syncfusion.com/vue-ui-components), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls), and [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls) platforms. + +## Prerequisites + +Have [`Docker`](https://www.docker.com/products/container-runtime#/download) installed in your environment: + +* On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). +* On macOS, install [`Docker for Mac`](https://docs.docker.com/desktop/install/mac-install/). + +## How to deploy the Spreadsheet Docker Image + +**Step 1:** Pull the spreadsheet-server image from Docker Hub. + +```console +docker pull syncfusion/spreadsheet-server +``` + +**Step 2:** Create the `docker-compose.yml` file with the following code in your file system. + +```yaml +version: '3.4' + +services: + spreadsheet-server: + image: syncfusion/spreadsheet-server:latest + environment: + # Provide your license key for activation + SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY + ports: + - "6002:8080" +``` + +**Note:** The Spreadsheet is a commercial product. It requires a valid [license key](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) to use in a production environment. Please replace `YOUR_LICENSE_KEY` with the valid license key in the `docker-compose.yml` file. + +**Step 3:** In a terminal tab, navigate to the directory where you've placed the `docker-compose.yml` file and execute the following: + +```console +docker-compose up +``` + +Now the Spreadsheet server Docker instance runs on localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Spreadsheet Web API open and save service at `http://localhost:6002/api/spreadsheet/open` and `http://localhost:6002/api/spreadsheet/save`. + +**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openurl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveurl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet component. For more information on how to get started with the Spreadsheet component, refer to this [`getting started page.`](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) + +```ts +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' +import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet' +import { Component } from '@angular/core'; + +@Component({ +imports: [ + SpreadsheetAllModule + ], + +standalone: true, + selector: 'app-root', + template: '' +}) +export class AppComponent { } +``` + +## How to configure different cultures using a Docker compose file + +By default, the Spreadsheet Docker container is generated in the `en_US` culture. You can configure different cultures using the `LC_ALL`, `LANGUAGE`, and `LANG` environment variables in the `docker-compose.yml` file. These environment variables are replaced in the Docker file to set the specified culture for the Spreadsheet server. + +```yaml +version: '3.4' + +services: + spreadsheet-server: + image: syncfusion/spreadsheet-server:latest + environment: + # Provide your license key for activation + SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY + # Specify the culture to configure for the Spreadsheet server + LC_ALL: de_DE.UTF-8 + LANGUAGE: de_DE.UTF-8 + LANG: de_DE.UTF-8 + ports: + - "6002:8080" +``` + +Please refer to these getting started pages to create a Spreadsheet in [`Javascript`](https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es5/getting-started), [`Angular`](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started), [`Vue`](https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/getting-started), [`ASP.NET Core`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core), and [`ASP.NET MVC`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/getting-started-mvc). \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-overview.md b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-overview.md new file mode 100644 index 0000000000..2e5a031c6b --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-overview.md @@ -0,0 +1,49 @@ +--- +layout: post +title: Web Services Overview in Angular Spreadsheet | Syncfusion +description: Learn here all about how to connect web services using ASP.NET Core and ASP.NET MVC in Angular Spreadsheet of Syncfusion Essential JS 2 and more. +control: Web Services +platform: document-processing +documentation: ug +--- + +# Connect Web Services for Angular Spreadsheet Open and Save + +Unlock advanced Excel file processing in your web applications by connecting the Syncfusion Spreadsheet component to your own back-end web services. This overview explains the purpose, benefits, and high-level process for enabling open and save operations using ASP.NET Core and ASP.NET MVC. + +## What are Spreadsheet Open and Save Services? + +The Syncfusion Spreadsheet component allows users to import (open) and export (save) Excel files directly from the browser. These operations require secure, reliable back-end web services to process files and data. + +By default, demo endpoints hosted by Syncfusion are used. For production or development, it is strongly recommended to configure your own web services for: +- **Security:** Keep files and data within your infrastructure. +- **Performance:** Reduce latency and dependency on external services. +- **Customization:** Implement business logic for file validation, processing, or storage. +- **Compliance:** Meet regulatory and privacy requirements. + +## Supported Platforms + +You can implement these web services using: +- [ASP.NET Core (cross-platform, modern .NET)](./webservice-using-aspnetcore) +- [ASP.NET MVC (classic .NET Framework)](./webservice-using-aspnetmvc) + +Both platforms support endpoints for: +- **Open:** Import Excel files into the Spreadsheet component. +- **Save:** Export Spreadsheet data as Excel files. + +## How It Works + +1. **Configure Client URLs:** + Set the `openUrl` and `saveUrl` properties in the Spreadsheet component to your back-end endpoints. +2. **Implement back-end Endpoints:** + Use Syncfusion libraries in ASP.NET Core or MVC to handle file uploads (open) and data exports (save). +3. **Enable CORS:** + Allow cross-origin requests so your web app can communicate with the back-end service. +4. **Handle File Size and Security:** + Configure server settings for large file uploads and apply security best practices. + +## See Also + +- [Open Excel Files](../open-excel-files) +- [Save Excel Files](../save-excel-files) +- [Spreadsheet Server Docker Image Overview](../server-deployment/spreadsheet-server-docker-image-overview) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetcore.md b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetcore.md new file mode 100644 index 0000000000..0f0cd54168 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetcore.md @@ -0,0 +1,143 @@ +--- +layout: post +title: Web Services using ASP.NET Core in Angular Spreadsheet | Syncfusion +description: Learn here all about web services using ASP.NET Core in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Web Services +platform: document-processing +documentation: ug +--- + +# Connecting Web Services for Spreadsheet Open and Save in ASP.NET Core + +This guide explains how to set up and connect local web services for open and save operations in the Syncfusion Spreadsheet component using ASP.NET Core. + +## Create a Local ASP.NET Core Web API + +### Create a New ASP.NET Core Web API Project + +Follow the official Microsoft tutorial to create a controller-based Web API project: + +[Tutorial: Create a controller-based web API with ASP.NET Core | Microsoft Learn](https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-10.0&source=recommendations&tabs=visual-studio#create-a-web-api-project) + +### Install Required Dependencies + +For spreadsheet open and save operations, install the following NuGet packages: + +| Platform | Assembly | NuGet Package | +|---------------|------------------------------------------|---------------| +| ASP.NET Core | Syncfusion.EJ2.Spreadsheet.AspNet.Core
Syncfusion.EJ2.AspNet.Core
Syncfusion.XlsIORenderer.Net.Core | [Syncfusion.EJ2.Spreadsheet.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core)
[Syncfusion.EJ2.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core)
[Syncfusion.XlsIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.XlsIORenderer.Net.Core) | + +For more details, see the [dependencies section on nuget.org](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core#dependencies-body-tab). + +### Add Open and Save Controllers + +Add the following controller actions to enable open and save functionality: + +```csharp +// Open action +[HttpPost] +[Route("Open")] +public IActionResult Open([FromForm] IFormCollection openRequest) +{ + OpenRequest open = new OpenRequest(); + if (openRequest.Files && openRequest.Files.Count > 0) { + open.File = openRequest.Files[0]; + return Content(Workbook.Open(open)); + } + return BadRequest("No file uploaded."); +} + +// Save action +[HttpPost] +[Route("Save")] +public IActionResult Save([FromForm] SaveSettings saveSettings) +{ + if(saveSettings && saveSettings.JSONData) { + return Workbook.Save(saveSettings); + } + return BadRequest("saveSettings or JSONData was not available."); +} +``` + +### Configure File Size Limits + +By default, ASP.NET Core and web servers impose size limits on incoming HTTP requests to prevent abuse and protect server resources. When uploading large Excel files, these requests can exceed the default limits, causing upload failures. To support large Excel files, you need to configure file size limits in your server settings to allow receiving large payloads over HTTP requests. + +**web.config** +```xml + + + + + + + + + + + +``` + +**Program.cs** +```csharp +// Configure FormOptions to allow large file uploads by setting multipart body and value length limits +// This enables the server to accept large Excel files in form submissions without rejecting them +builder.Services.Configure(options => +{ + options.MultipartBodyLengthLimit = int.MaxValue; + options.ValueLengthLimit = int.MaxValue; +}); + +// Configure Kestrel web server to allow large request bodies for handling large Excel file uploads +// This removes the default size restriction at the server level, enabling it to process large files +builder.WebHost.ConfigureKestrel(options => +{ + options.Limits.MaxRequestBodySize = int.MaxValue; +}); +``` + +### Enable CORS (Cross-Origin Resource Sharing) + +CORS (Cross-Origin Resource Sharing) is a security feature that allows web applications from different origins (domains, protocols, or ports) to communicate with your API. By default, browsers block cross-origin requests for security reasons. Since the Angular Spreadsheet component runs in the client browser and needs to communicate with your ASP.NET Core API for open and save operations, you must configure CORS to allow these requests. The following configuration enables cross-origin requests from any origin, which is suitable for development environments. + +Edit `Program.cs` to allow cross-origin requests: + +```csharp +// Configure CORS to allow the Angular Spreadsheet component to communicate with the API from any origin +// This is necessary for the browser to permit cross-origin requests for file open and save operations +var MyAllowSpecificOrigins = "AllowAllOrigins"; +builder.Services.AddCors(options => +{ + options.AddPolicy(MyAllowSpecificOrigins, builder => + { + builder.AllowAnyOrigin() + .AllowAnyMethod() + .AllowAnyHeader(); + }); +}); + +var app = builder.Build(); +app.UseCors(MyAllowSpecificOrigins); +``` + +### Run the Web API Project + +Build and run your Web API project. For detailed instructions, refer to: + +[Run the ASP.NET Core Web API project](https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-10.0&source=recommendations&tabs=visual-studio#run-the-project) + +### Configuring the Client-Side URLs + +Once your local service is launched, configure the openUrl and saveUrl properties in your client application to use the local endpoints for import and export operations + +```ts + +``` + +For more information, refer to the following [blog post](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services). + +## See Also + +* [Docker Image Overview](../server-deployment/spreadsheet-server-docker-image-overview) +* [Open Excel Files](../open-excel-files) +* [Save Excel Files](../save-excel-files) \ No newline at end of file diff --git a/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetmvc.md b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetmvc.md new file mode 100644 index 0000000000..b97f421396 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/Angular/web-services/webservice-using-aspnetmvc.md @@ -0,0 +1,135 @@ +--- +layout: post +title: Web Services using ASP.NET MVC in Angular Spreadsheet | Syncfusion +description: Learn here all about web services using ASP.NET MVC in Angular Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Web Services +platform: document-processing +documentation: ug +--- + +# Connecting Web Services for Spreadsheet Open and Save in ASP.NET MVC + +This guide explains how to set up and connect local web services for open and save operations in the Syncfusion Spreadsheet component using **ASP.NET MVC**. + +## Create a Local ASP.NET MVC Web Service + +### Create a New ASP.NET MVC Project + +Follow the official Microsoft tutorial to create an ASP.NET MVC 5 project: + +[Getting Started with ASP.NET MVC 5 | Microsoft Learn](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started) + +### Install Required Dependencies + +For spreadsheet open and save operations, install the following NuGet packages: + +| Platform | Assembly | NuGet Package | +|---------------|------------------------------------------|---------------| +| ASP.NET MVC5 | Syncfusion.XlsIO.AspNet.Mvc5
Syncfusion.ExcelToPdfConverter.AspNet.Mvc5
Syncfusion.Pdf.AspNet.Mvc5
Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5
Syncfusion.EJ2.MVC5 | [Syncfusion.XlsIO.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.XlsIO.AspNet.Mvc5)
[Syncfusion.ExcelToPdfConverter.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.ExcelToPdfConverter.AspNet.Mvc5)
[Syncfusion.Pdf.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.Pdf.AspNet.Mvc5/)
[Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.ExcelChartToImageConverter.AspNet.Mvc5)
[Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) | + +### Add Open and Save Actions in Controller + +Add the following action methods to your controller (e.g., `SpreadsheetController`) to enable open and save functionality: + +```csharp +using System.Web; +using System.Web.Mvc; +using Syncfusion.EJ2.Spreadsheet; + +public class SpreadsheetController : Controller +{ + // Open action + [HttpPost] + public ActionResult Open(OpenRequest openRequest) + { + if (openRequest != null && openRequest.File != null) + { + var result = Workbook.Open(openRequest); + return Content(result); + } + return new HttpStatusCodeResult(400, "No file uploaded."); + } + + // Save action + [HttpPost] + public void Save(SaveSettings saveSettings) + { + if (saveSettings != null && saveSettings.JSONData != null) + { + Workbook.Save(saveSettings); + } + } +} +``` + +### Configure File Size Limits + +By default, ASP.NET MVC and web servers impose size limits on incoming HTTP requests to prevent abuse and protect server resources. When uploading large Excel files, these requests can exceed the default limits, causing upload failures. To support large Excel files, you need to configure file size limits in your server settings to allow receiving large payloads over HTTP requests. + + +**web.config** +```xml + + + + + + + + + + + + + + +``` + +### Enable CORS (Cross-Origin Resource Sharing) + +CORS (Cross-Origin Resource Sharing) is a security feature that allows web applications from different origins (domains, protocols, or ports) to communicate with your API. By default, browsers block cross-origin requests for security reasons. Since the Angular Spreadsheet component runs in the client browser and needs to communicate with your ASP.NET MVC web service for open and save operations, you must configure CORS to allow these requests. The following configuration enables cross-origin requests from any origin, which is suitable for development environme + +**How to Enable CORS in ASP.NET MVC** + +1. Open `Global.asax.cs` in your project. +2. Add the following code to the `Application_BeginRequest` method: + +```csharp +// Configure CORS to allow the Angular Spreadsheet component to communicate with the API from any origin +// This is necessary for the browser to permit cross-origin requests for file open and save operations +protected void Application_BeginRequest() +{ + // Allow all origins. For production, specify allowed origins instead of '*'. + HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); + HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); + HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept"); + + // Handle preflight requests + if (HttpContext.Current.Request.HttpMethod == "OPTIONS") + { + HttpContext.Current.Response.End(); + } +} +``` + +### Run the MVC Project + +After adding the controller codes and above mentioned configurations, build and run the MVC project (F5 or Ctrl+F5 in Visual Studio). + +--- + +### Configuring the Client-Side URLs + +Once your local service is launched, configure the openUrl and saveUrl properties in client application to use the local endpoints to perform import and export operation. + +```ts + +``` + +For more information, refer to the following [blog post](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services). + +## See Also + +* [Docker Image Overview](../server-deployment/spreadsheet-server-docker-image-overview) +* [Open Excel Files](../open-excel-files) +* [Save Excel Files](../save-excel-files) \ No newline at end of file From a694512ab09d01a541091f5d4df3e504b73a378d Mon Sep 17 00:00:00 2001 From: Deira-SF4418 Date: Tue, 5 May 2026 09:56:45 +0530 Subject: [PATCH 2/2] 1025145: Porting works in Angular spreadsheet component --- .../Excel/Spreadsheet/Angular/getting-started.md | 4 ++-- .../Angular/open-excel-file/from-azure-blob-storage.md | 4 ++-- .../open-excel-file/from-google-cloud-storage.md | 4 ++-- .../Angular/open-excel-file/from-google-drive.md | 10 +++++----- .../Angular/save-excel-file/to-google-cloud-storage.md | 10 +++++----- .../Angular/save-excel-file/to-google-drive.md | 2 +- 6 files changed, 17 insertions(+), 17 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md index 861168f45a..1c7b6f6d0e 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md @@ -7,7 +7,7 @@ platform: document-processing documentation: ug --- -# Getting Started with React Spreadsheet component +# Getting Started with Angular Spreadsheet component This section explains how to create a simple Angular application and add the [Syncfusion® Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) component with the minimum required setup. @@ -115,7 +115,7 @@ Add the following style references to the `src/App.css` file. @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; @import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-angular-spreadsheet/styles/material.css'; ``` ## Add Spreadsheet component diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-azure-blob-storage.md b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-azure-blob-storage.md index a23c5fa29b..e0a67aa44a 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-azure-blob-storage.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-azure-blob-storage.md @@ -11,9 +11,9 @@ documentation: ug To load a file from Azure Blob Storage in a Spreadsheet Component, you can follow the steps below -**Step 1:** Create a Simple Spreadsheet Sample in React +**Step 1:** Create a Simple Spreadsheet Sample in Angular -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. **Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-cloud-storage.md b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-cloud-storage.md index 3fffc2f567..9a4328aa97 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-cloud-storage.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-cloud-storage.md @@ -11,9 +11,9 @@ documentation: ug To load a file from Google Cloud Storage in a Spreadsheet Component, you can follow the steps below -**Step 1:** Create a Simple Spreadsheet Sample in React +**Step 1:** Create a Simple Spreadsheet Sample in Angular -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. **Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project diff --git a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-drive.md b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-drive.md index 77628777da..7cd5c0726b 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-drive.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-google-drive.md @@ -1,7 +1,7 @@ --- layout: post -title: Open excel from Google Drive in React Spreadsheet control | Syncfusion -description: Learn about how to Open an Excel file from Google Drive in React Spreadsheet control of Syncfusion Essential JS 2. +title: Open excel from Google Drive in Angular Spreadsheet control | Syncfusion +description: Learn about how to Open an Excel file from Google Drive in Angular Spreadsheet control of Syncfusion Essential JS 2. platform: document-processing control: Open file from Google Drive documentation: ug @@ -15,9 +15,9 @@ To load a file from Google Drive in a Spreadsheet Component, you can follow the You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/workspace/drive/api/guides/enable-sdk). -**Step 2:** Create a Simple Spreadsheet Sample in React +**Step 2:** Create a Simple Spreadsheet Sample in Angular -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. **Step 3:** Modify the `SpreadsheetController.cs` File in the Web Service Project @@ -149,7 +149,7 @@ public class FileOptions N> Replace the **credential path**, **folderId** and **application name** in json file with your actual Google drive folder ID , your name for your application and the path for the JSON file. -**Step 4:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and process the Excel file from the Google Drive and load the JSON result into the client-side spreadsheet using the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method. +**Step 4:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and process the Excel file from the Google Drive and load the JSON result into the client-side spreadsheet using the [openFromJson](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openfromjson) method. ```typescript diff --git a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-cloud-storage.md b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-cloud-storage.md index 5fa90963bc..76f38e93c8 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-cloud-storage.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-cloud-storage.md @@ -1,7 +1,7 @@ --- layout: post -title: Save excel to Google Cloud in React Spreadsheet control | Syncfusion -description: Learn about how to Save an Excel file from Google Cloud Storage in React Spreadsheet control of Syncfusion Essential JS 2. +title: Save excel to Google Cloud in Angular Spreadsheet control | Syncfusion +description: Learn about how to Save an Excel file from Google Cloud Storage in Angular Spreadsheet control of Syncfusion Essential JS 2. platform: document-processing control: Save file to Google Cloud Storage documentation: ug @@ -11,9 +11,9 @@ documentation: ug To save a file to Google Cloud Storage in a Spreadsheet Component, you can follow the steps below -**Step 1:** Create a Simple Spreadsheet Sample in React +**Step 1:** Create a Simple Spreadsheet Sample in Angular -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component. +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. **Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project @@ -79,7 +79,7 @@ public async Task SaveToGoogleCloud([FromForm] SaveSettings saveS } ``` -**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end +**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end ```ts diff --git a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-drive.md b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-drive.md index a693936864..0993675d73 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-drive.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/save-excel-file/to-google-drive.md @@ -1,7 +1,7 @@ --- layout: post title: Save excel to Google Drive in Angular Spreadsheet control | Syncfusion -description: Learn about how to Save an Excel file to Google Drive from React Spreadsheet control of Syncfusion Essential JS 2. +description: Learn about how to Save an Excel file to Google Drive from Angular Spreadsheet control of Syncfusion Essential JS 2. platform: document-processing control: Save file to Google Drive documentation: ug