From b6609ac340bdfca150d8e139eeefe685174d0955 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Thu, 14 May 2026 18:37:29 +0530 Subject: [PATCH 1/2] 1026690: Need to modify the Open and Save section content and address UG corrections in Spreadsheet. --- .../Spreadsheet/React/open-excel-files.md | 61 +++++++++---------- .../Spreadsheet/React/save-excel-files.md | 59 +++++++++--------- 2 files changed, 58 insertions(+), 62 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md index fa68511d31..a9221cdf41 100644 --- a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md @@ -9,11 +9,37 @@ documentation: ug # Open Excel Files in Syncfusion React Spreadsheet -The React Spreadsheet component uses a server‑assisted workflow to import Excel files accurately and efficiently. When a user uploads an Excel file, the component sends the file to the server for parsing, ensuring smooth performance because the heavy processing workload is handled on the server side. +The Syncfusion React Spreadsheet component uses a server-assisted workflow to open Excel files efficiently and accurately. When a user uploads an Excel file, the component sends the file to a server endpoint for processing. This approach keeps the browser fast and responsive, as all heavy parsing and conversion are handled on the server. -On the server, the [`Syncfusion.EJ2.Spreadsheet library`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) built on top of [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview), reads the Excel file and extracts all relevant details, including data, styles, formulas, formatting, and sheet structure. The server then converts this information into a Spreadsheet‑compatible JSON workbook. +On the server, the [`Syncfusion.EJ2.Spreadsheet`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) library (built on top of [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview) and **ASP.NET**) reads the Excel file. The server extracts all data, styles, formulas, formatting, and sheet structure, then converts everything into a Spreadsheet-compatible JSON format. This JSON is sent back to the client, where the React Spreadsheet component renders the workbook in the browser, preserving the original Excel layout and content. -Once processing is complete, the JSON workbook is returned to the client, where the React Spreadsheet component renders it in the browser. This workflow preserves the original Excel layout and ensures the imported content appears with full fidelity. +In the code samples and demos, you may see **Syncfusion-hosted service URLs** used for the `openUrl` and `saveUrl` properties. These URLs point to Syncfusion’s own WebAPI services (built with **ASP.NET Core**) that handle opening and saving Excel files. These hosted URLs are provided for demonstration and evaluation purposes only. + +For your own development and production, you should always set up your own web service for open/save operations. This ensures your data remains private, secure, and fully under your control. + +**Server Configuration** + +Below is an example of a server-side `Open` endpoint using ASP.NET Core WebAPI, which is the same approach used for building the hosted Syncfusion URLs. This endpoint receives the uploaded Excel file, processes it with the Syncfusion Spreadsheet library, and returns the workbook JSON to the client: + +```csharp +[Route("api/[controller]")] +public class SpreadsheetController : Controller +{ + // To open Excel file + [AcceptVerbs("Post")] + [HttpPost] + [EnableCors("AllowAllOrigins")] + [Route("Open")] + public IActionResult Open(IFormCollection openRequest) + { + OpenRequest open = new OpenRequest(); + open.File = openRequest.Files[0]; + return Content(Workbook.Open(open)); + } +} +``` + +> **Note:** For details on how to set up your own web service for open/save operations, refer to the [web service](./web-services/webservice-overview) section of this documentation. To enable opening Excel files, set the [`allowOpen`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowopen) property to **true** and specify the service url using the [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) property. The control will send the uploaded file to this endpoint, where it is processed and returned as JSON for the Spreadsheet to render. @@ -535,35 +561,6 @@ public IActionResult Open(IFormCollection openRequest) ![External workbook confirmation dialog](./images/external-reference-dialog-alert.png) -## Server configuration - -In the Spreadsheet component, Excel import processing is handled on the `server‑side`. Therefore, to enable Excel importing in your application, you need to configure a server using any of the following web service technologies: - -* WebAPI -* WCF Service -* ASP.NET MVC Controller Action - -The following code example demonstrates how to configure the server using a `WebAPI` service. - -```csharp - - [Route("api/[controller]")] - public class SpreadsheetController : Controller - { - //To open Excel file - [AcceptVerbs("Post")] - [HttpPost] - [EnableCors("AllowAllOrigins")] - [Route("Open")] - public IActionResult Open(IFormCollection openRequest) - { - OpenRequest open = new OpenRequest(); - open.File = openRequest.Files[0]; - return Content(Workbook.Open(open)); - } - } -``` - ## Server dependencies Open helper functions are shipped in the Syncfusion.EJ2.Spreadsheet package, which is available in Essential Studio® and [`nuget.org`](https://www.nuget.org/). Following list of dependencies required for Spreadsheet open and save operations. diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index 8d88ab29e2..40ab653b5f 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md @@ -9,11 +9,37 @@ documentation: ug # Save Excel Files in Syncfusion React Spreadsheet -When exporting an Excel file from the React Spreadsheet component, the process is handled through a streamlined server‑side workflow. The Spreadsheet content displayed in the browser is first serialized into a structured JSON workbook. This JSON includes all essential details—such as data, formulas, formatting, styles, and sheet configuration. +The Syncfusion React Spreadsheet component uses a server-assisted workflow to save Excel files efficiently and accurately. When a user saves an Excel file, the Spreadsheet content displayed in the browser is first serialized into a structured JSON workbook. This JSON includes all essential details—such as data, formulas, formatting, styles, and sheet configuration. -Once generated, this JSON workbook is sent to the server, where the [`Syncfusion.EJ2.Spreadsheet library`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) uses [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview) to convert the JSON data into a fully formatted Excel file. During this process, the JSON workbook is parsed and its contents are mapped to an XlsIO Workbook instance, ensuring that all data, styles, formulas, and other Spreadsheet features are accurately preserved. +The JSON workbook is then sent to a server endpoint for processing. On the server, the [`Syncfusion.EJ2.Spreadsheet`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) library (built on top of [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview) and **ASP.NET**) converts the JSON data into a fully formatted Excel file. The server parses the JSON, maps its contents to an XlsIO Workbook instance, and ensures that all data, styles, formulas, and other Spreadsheet features are accurately preserved. -Since the server is responsible for generating the final Excel file, the total export time can vary depending on the workbook’s complexity. Factors such as the level of formatting, styles and the use of advanced features like formulas or conditional formatting can influence processing time. After the file is successfully generated, it is sent back to the client for download. +Since the server is responsible for generating the final Excel file, the total export time can vary depending on the workbook’s complexity. Factors such as the level of formatting, styles, and the use of advanced features like formulas or conditional formatting can influence processing time. After the file is successfully generated, it is sent back to the client for download. + +In the code samples and demos, you may see **Syncfusion-hosted service URLs** used for the `saveUrl` property. These URLs point to Syncfusion’s own WebAPI services (built with **ASP.NET Core**) that handle saving Excel files. These hosted URLs are provided for demonstration and evaluation purposes only. + +For your own development and production, you should always set up your own web service for save operations. This ensures your data remains private, secure, and fully under your control. + +**Server Configuration** + +Below is an example of a server-side `Save` endpoint using ASP.NET Core WebAPI, which is the same approach used for building the hosted Syncfusion URLs. This endpoint receives the Spreadsheet data as JSON, processes it with the Syncfusion Spreadsheet library, and returns the generated Excel file to the client: + +```csharp +[Route("api/[controller]")] +public class SpreadsheetController : Controller +{ + // To save as Excel file + [AcceptVerbs("Post")] + [HttpPost] + [EnableCors("AllowAllOrigins")] + [Route("Save")] + public IActionResult Save([FromForm] SaveSettings saveSettings) + { + return Workbook.Save(saveSettings); + } +} +``` + +> **Note:** For details on how to set up your own web service for open/save operations, refer to the [web service](./web-services/webservice-overview) section of this documentation. To enable saving Excel files, set the [`allowSave`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowsave) property to **true** and specify the service URL using the [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) property. When a save action is triggered, the control sends the spreadsheet model to this endpoint, where it is processed and returned as a downloadable Excel file. @@ -443,33 +469,6 @@ The possible values are: {% previewsample "/document-processing/code-snippet/spreadsheet/react/open-save-cs8" %} - -## Server configuration - -In the Spreadsheet component, Excel export processing is handled on the `server‑side`. Therefore, to enable exporting in your application, you need to configure a server using any of the following web service technologies: - -* WebAPI -* WCF Service -* ASP.NET MVC Controller Action - -The following code snippet shows how to configure the server using a `WebAPI` service: - -```csharp -[Route("api/[controller]")] -public class SpreadsheetController : Controller -{ - // To save as Excel file - [AcceptVerbs("Post")] - [HttpPost] - [EnableCors("AllowAllOrigins")] - [Route("Save")] - public IActionResult Save([FromForm] SaveSettings saveSettings) - { - return Workbook.Save(saveSettings); - } -} -``` - ## Server dependencies Save helper functions are included in the `Syncfusion.EJ2.Spreadsheet` package, which is available in Essential Studio® and on [`nuget.org`](https://www.nuget.org). From cd974bb3403b3d53a88acffab7c1ca4db48ff2d6 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 18 May 2026 18:18:34 +0530 Subject: [PATCH 2/2] 1026690: Need to modify the Open and Save section content and address UG corrections in Spreadsheet. --- .../Spreadsheet/React/open-excel-files.md | 31 ++++++++++--------- .../Spreadsheet/React/save-excel-files.md | 27 +++++++++------- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md index a9221cdf41..b41c844dc7 100644 --- a/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/open-excel-files.md @@ -9,33 +9,36 @@ documentation: ug # Open Excel Files in Syncfusion React Spreadsheet -The Syncfusion React Spreadsheet component uses a server-assisted workflow to open Excel files efficiently and accurately. When a user uploads an Excel file, the component sends the file to a server endpoint for processing. This approach keeps the browser fast and responsive, as all heavy parsing and conversion are handled on the server. +The Syncfusion React Spreadsheet component uses a server-assisted workflow to open Excel files efficiently and accurately. When a user uploads an Excel file, the file is sent to a server endpoint for processing. This keeps the browser fast and responsive, as all heavy parsing and conversion are handled on the server. -On the server, the [`Syncfusion.EJ2.Spreadsheet`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) library (built on top of [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview) and **ASP.NET**) reads the Excel file. The server extracts all data, styles, formulas, formatting, and sheet structure, then converts everything into a Spreadsheet-compatible JSON format. This JSON is sent back to the client, where the React Spreadsheet component renders the workbook in the browser, preserving the original Excel layout and content. +On the server, the [`Syncfusion.EJ2.Spreadsheet`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) library is used to process the uploaded Excel file. This library is built on top of [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview), which itself is implemented using **.NET Frameworks**. The server extracts all data, styles, formulas, formatting, and sheet structure, then converts everything into a Spreadsheet-compatible JSON format. This JSON is sent back to the client, where the React Spreadsheet component renders the workbook in the browser, preserving the original Excel layout and content. -In the code samples and demos, you may see **Syncfusion-hosted service URLs** used for the `openUrl` and `saveUrl` properties. These URLs point to Syncfusion’s own WebAPI services (built with **ASP.NET Core**) that handle opening and saving Excel files. These hosted URLs are provided for demonstration and evaluation purposes only. +In the code samples and demos, you may see **Syncfusion-hosted service URLs** used for the `openUrl` and `saveUrl` properties. These URLs point to Syncfusion’s own WebAPI services (built with **ASP.NET Core**) that handle opening and saving Excel files. These hosted URLs are provided only for demonstration and evaluation purposes: -For your own development and production, you should always set up your own web service for open/save operations. This ensures your data remains private, secure, and fully under your control. +**Hosted Syncfusion Service URLs** +``` +openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open' +saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +``` + +For your own development and production, you must set up your own web service for open/save operations. This ensures your data remains private, secure, and fully under your control. Using your own service also allows you to customize processing, apply business logic, and comply with your organization’s security requirements. **Server Configuration** Below is an example of a server-side `Open` endpoint using ASP.NET Core WebAPI, which is the same approach used for building the hosted Syncfusion URLs. This endpoint receives the uploaded Excel file, processes it with the Syncfusion Spreadsheet library, and returns the workbook JSON to the client: ```csharp -[Route("api/[controller]")] -public class SpreadsheetController : Controller +// Open action +[HttpPost] +[Route("Open")] +public IActionResult Open([FromForm] IFormCollection openRequest) { - // To open Excel file - [AcceptVerbs("Post")] - [HttpPost] - [EnableCors("AllowAllOrigins")] - [Route("Open")] - public IActionResult Open(IFormCollection openRequest) - { - OpenRequest open = new 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."); } ``` diff --git a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md index 40ab653b5f..2c0f5b95d6 100644 --- a/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md +++ b/Document-Processing/Excel/Spreadsheet/React/save-excel-files.md @@ -11,31 +11,34 @@ documentation: ug The Syncfusion React Spreadsheet component uses a server-assisted workflow to save Excel files efficiently and accurately. When a user saves an Excel file, the Spreadsheet content displayed in the browser is first serialized into a structured JSON workbook. This JSON includes all essential details—such as data, formulas, formatting, styles, and sheet configuration. -The JSON workbook is then sent to a server endpoint for processing. On the server, the [`Syncfusion.EJ2.Spreadsheet`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) library (built on top of [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview) and **ASP.NET**) converts the JSON data into a fully formatted Excel file. The server parses the JSON, maps its contents to an XlsIO Workbook instance, and ensures that all data, styles, formulas, and other Spreadsheet features are accurately preserved. +The JSON workbook is then sent to a server endpoint for processing. On the server, the [`Syncfusion.EJ2.Spreadsheet`](https://www.nuget.org/packages/Syncfusion.EJ2.Spreadsheet.AspNet.Core) library is used to convert the JSON data into a fully formatted Excel file. This library is built on top of [`Syncfusion XlsIO`](https://help.syncfusion.com/document-processing/excel/excel-library/net/overview), which itself is implemented using **.NET Frameworks**. The server parses the JSON, maps its contents to an XlsIO Workbook instance, and ensures that all data, styles, formulas, and other Spreadsheet features are accurately preserved. Since the server is responsible for generating the final Excel file, the total export time can vary depending on the workbook’s complexity. Factors such as the level of formatting, styles, and the use of advanced features like formulas or conditional formatting can influence processing time. After the file is successfully generated, it is sent back to the client for download. -In the code samples and demos, you may see **Syncfusion-hosted service URLs** used for the `saveUrl` property. These URLs point to Syncfusion’s own WebAPI services (built with **ASP.NET Core**) that handle saving Excel files. These hosted URLs are provided for demonstration and evaluation purposes only. +In the code samples and demos, you may see **Syncfusion-hosted service URLs** used for the `saveUrl` property. These URLs point to Syncfusion’s own WebAPI services (built with **ASP.NET Core**) that handle saving Excel files. These hosted URLs are provided only for demonstration and evaluation purposes: -For your own development and production, you should always set up your own web service for save operations. This ensures your data remains private, secure, and fully under your control. +**Hosted Syncfusion Service URLs:** +``` +openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open' +saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save' +``` + +For your own development and production, you must set up your own web service for save operations. This ensures your data remains private, secure, and fully under your control. Using your own service also allows you to customize processing, apply business logic, and comply with your organization’s security requirements. **Server Configuration** Below is an example of a server-side `Save` endpoint using ASP.NET Core WebAPI, which is the same approach used for building the hosted Syncfusion URLs. This endpoint receives the Spreadsheet data as JSON, processes it with the Syncfusion Spreadsheet library, and returns the generated Excel file to the client: ```csharp -[Route("api/[controller]")] -public class SpreadsheetController : Controller +// Save action +[HttpPost] +[Route("Save")] +public IActionResult Save([FromForm] SaveSettings saveSettings) { - // To save as Excel file - [AcceptVerbs("Post")] - [HttpPost] - [EnableCors("AllowAllOrigins")] - [Route("Save")] - public IActionResult Save([FromForm] SaveSettings saveSettings) - { + if(saveSettings && saveSettings.JSONData) { return Workbook.Save(saveSettings); } + return BadRequest("saveSettings or JSONData was not available."); } ```