From a7d2f916a8e684100d05a759dc1eead85dec00d0 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Fri, 5 Jul 2024 21:07:39 +0530 Subject: [PATCH 1/3] 895338: Added the reviewed content. --- ej2-asp-core-mvc/spreadsheet/open-save.md | 133 ++++++++++++++++++++++ 1 file changed, 133 insertions(+) diff --git a/ej2-asp-core-mvc/spreadsheet/open-save.md b/ej2-asp-core-mvc/spreadsheet/open-save.md index 50026e0793..c7a1f9c5a7 100644 --- a/ej2-asp-core-mvc/spreadsheet/open-save.md +++ b/ej2-asp-core-mvc/spreadsheet/open-save.md @@ -247,6 +247,67 @@ The following code example shows how to open the spreadsheet data as base64 stri {% endtabs %} {% endif %} +### To open an Excel file located on a server + +By default, the Spreadsheet component provides an option to browse files from the local file system and open them within the component. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client as `JSON data`. On the client side, you should use the `openFromJson` method to load that `JSON data` into the Spreadsheet component. + +**Server endpoint code**: + +```csharp + + public IActionResult Open([FromBody] FileOptions options) + { + OpenRequest open = new OpenRequest(); + string filePath = _env.ContentRootPath.ToString() + "\\Files\\" + options.FileName + ".xlsx"; + // Getting the file stream from the file path. + FileStream fileStream = new FileStream(filePath, FileMode.Open); + // Converting MemoryStream to IFormFile. + IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx"); + open.File = formFile; + // Processing the Excel file and return the workbook JSON. + var result = Workbook.Open(open); + fileStream.Close(); + return Content(result); + } + + public class FileOptions + { + public string FileName { get; set; } = string.Empty; + } +``` + +**Client-side code**: + +```js + + // Fetch call to server to load the Excel. + fetch('https://localhost:{{Your port number}}/Home/Open', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ FileName: 'Sample' }), + }) + .then((response) => response.json()) + .then((data) => { + // Load the JSON data into spreadsheet. + spreadsheet.openFromJson({ file: data }); + }) + +``` + +You can find the server endpoint code to fetch and process the Excel file in this attachment(https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). + +After launching the server endpoint, you need to update the file fetch URL on the client-side sample as shown below. + +```js + +// To open an Excel file from the server. + +fetch('https://localhost:{port number}/Home/Open') + +``` + ### External workbook confirmation dialog When you open an excel file that contains external workbook references, you will see a confirmation dialog. This dialog allows you to either continue with the file opening or cancel the operation. This confirmation dialog will appear only if you set the `AllowExternalWorkbook` property value to **false** during the open request, as shown below. This prevents the spreadsheet from displaying inconsistent data. @@ -492,6 +553,78 @@ The following code example shows how to save the spreadsheet data as base64 stri {% endtabs %} {% endif %} +### To save an Excel file to a server location + +By default, the spreadsheet saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. On the client side, you must convert the spreadsheet data into `JSON` format using the `saveAsJson` method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, convert the stream into an Excel file, and then save it to the server location. + +**Client-side code**: + +```js + + // Convert the spreadsheet workbook to JSON data. + spreadsheet.saveAsJson().then((json) => { + const formData = new FormData(); + formData.append('FileName', "Sample"); + formData.append('saveType', 'Xlsx'); + // Passing the JSON data to perform the save operation. + formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); + formData.append('PdfLayoutSettings', JSON.stringify({ FitSheetOnOnePage: false })); + // Using fetch to invoke the save process. + fetch('https://localhost:{{Your port number}}/Home/Save', { + method: 'POST', + body: formData + }).then((response) => { + console.log(response); + }); + }); + +``` + +**Server endpoint code**: + +```csharp + + public string Save(SaveSettings saveSettings) + { + ExcelEngine excelEngine = new ExcelEngine(); + IApplication application = excelEngine.Excel; + try + { + + // Save the workbook as Stream. + Stream fileStream = Workbook.Save(saveSettings); + // Using XLSIO, we are opening the file stream and saving the file in the server under Files folder. + // You can also save the stream file in your server location. + IWorkbook workbook = application.Workbooks.Open(fileStream); + string basePath = _env.ContentRootPath + "\\Files\\" + saveSettings.FileName + ".xlsx"; + var file = System.IO.File.Create(basePath); + fileStream.Seek(0, SeekOrigin.Begin); + // To convert the stream to file options. + fileStream.CopyTo(file); + file.Dispose(); + fileStream.Dispose(); + return string.Empty; + } + catch (Exception ex) + { + return ex.Message; + } + } + +``` + +You can find the server endpoint code to save the spreadsheet JSON data as an Excel file in the attached documentation(https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). + +After launching the server endpoint, you need to update the file fetch URL on the client-side sample as shown below. + +```js + +//To save an Excel file to the server. + +fetch('https://localhost:{port number}/Home/Save') + +``` + ### Supported file formats The following list of Excel file formats are supported in Spreadsheet: From f90d42222f3961ee28feec851d15dc62b2223af0 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Mon, 8 Jul 2024 19:41:31 +0530 Subject: [PATCH 2/3] 895338: Addressed review comments. --- ej2-asp-core-mvc/spreadsheet/open-save.md | 35 ++++++++--------------- 1 file changed, 12 insertions(+), 23 deletions(-) diff --git a/ej2-asp-core-mvc/spreadsheet/open-save.md b/ej2-asp-core-mvc/spreadsheet/open-save.md index c7a1f9c5a7..6401e62998 100644 --- a/ej2-asp-core-mvc/spreadsheet/open-save.md +++ b/ej2-asp-core-mvc/spreadsheet/open-save.md @@ -249,19 +249,18 @@ The following code example shows how to open the spreadsheet data as base64 stri ### To open an Excel file located on a server -By default, the Spreadsheet component provides an option to browse files from the local file system and open them within the component. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client as `JSON data`. On the client side, you should use the `openFromJson` method to load that `JSON data` into the Spreadsheet component. +By default, the Spreadsheet control provides an option to browse files from the local file system and open them within the control. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the `openFromJson` method to load that `JSON data` into the Spreadsheet control. -**Server endpoint code**: +**Server Endpoint**: ```csharp - public IActionResult Open([FromBody] FileOptions options) { OpenRequest open = new OpenRequest(); string filePath = _env.ContentRootPath.ToString() + "\\Files\\" + options.FileName + ".xlsx"; // Getting the file stream from the file path. FileStream fileStream = new FileStream(filePath, FileMode.Open); - // Converting MemoryStream to IFormFile. + // Converting "MemoryStream" to "IFormFile". IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx"); open.File = formFile; // Processing the Excel file and return the workbook JSON. @@ -276,11 +275,11 @@ By default, the Spreadsheet component provides an option to browse files from th } ``` -**Client-side code**: +**Client Side**: ```js - // Fetch call to server to load the Excel. + // Fetch call to server to load the Excel file. fetch('https://localhost:{{Your port number}}/Home/Open', { method: 'POST', headers: { @@ -296,16 +295,11 @@ By default, the Spreadsheet component provides an option to browse files from th ``` -You can find the server endpoint code to fetch and process the Excel file in this attachment(https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). - -After launching the server endpoint, you need to update the file fetch URL on the client-side sample as shown below. +You can find the server endpoint code to fetch and process the Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). After launching the server endpoint, you need to update the URL on the client side sample as shown below. ```js - // To open an Excel file from the server. - fetch('https://localhost:{port number}/Home/Open') - ``` ### External workbook confirmation dialog @@ -555,9 +549,9 @@ The following code example shows how to save the spreadsheet data as base64 stri ### To save an Excel file to a server location -By default, the spreadsheet saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. On the client side, you must convert the spreadsheet data into `JSON` format using the `saveAsJson` method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, convert the stream into an Excel file, and then save it to the server location. +By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the `saveAsJson` method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location. -**Client-side code**: +**Client Side**: ```js @@ -580,7 +574,7 @@ By default, the spreadsheet saves the Excel file and downloads it to the local f ``` -**Server endpoint code**: +**Server Endpoint**: ```csharp @@ -591,9 +585,9 @@ By default, the spreadsheet saves the Excel file and downloads it to the local f try { - // Save the workbook as Stream. + // Save the workbook as stream. Stream fileStream = Workbook.Save(saveSettings); - // Using XLSIO, we are opening the file stream and saving the file in the server under Files folder. + // Using XLSIO, we are opening the file stream and saving the file in the server under "Files" folder. // You can also save the stream file in your server location. IWorkbook workbook = application.Workbooks.Open(fileStream); string basePath = _env.ContentRootPath + "\\Files\\" + saveSettings.FileName + ".xlsx"; @@ -613,16 +607,11 @@ By default, the spreadsheet saves the Excel file and downloads it to the local f ``` -You can find the server endpoint code to save the spreadsheet JSON data as an Excel file in the attached documentation(https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). - -After launching the server endpoint, you need to update the file fetch URL on the client-side sample as shown below. +You can find the server endpoint code to save the spreadsheet data as an Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). After launching the server endpoint, you need to update the URL on the client side sample as shown below. ```js - //To save an Excel file to the server. - fetch('https://localhost:{port number}/Home/Save') - ``` ### Supported file formats From e93d586621ef9e956ec1f864c909a2017a314ff6 Mon Sep 17 00:00:00 2001 From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com> Date: Tue, 16 Jul 2024 17:24:59 +0530 Subject: [PATCH 3/3] 895338: Addressed the review comments. --- ej2-asp-core-mvc/spreadsheet/open-save.md | 27 ++++------------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/ej2-asp-core-mvc/spreadsheet/open-save.md b/ej2-asp-core-mvc/spreadsheet/open-save.md index 6401e62998..c647c0df26 100644 --- a/ej2-asp-core-mvc/spreadsheet/open-save.md +++ b/ej2-asp-core-mvc/spreadsheet/open-save.md @@ -251,8 +251,6 @@ The following code example shows how to open the spreadsheet data as base64 stri By default, the Spreadsheet control provides an option to browse files from the local file system and open them within the control. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the `openFromJson` method to load that `JSON data` into the Spreadsheet control. -**Server Endpoint**: - ```csharp public IActionResult Open([FromBody] FileOptions options) { @@ -275,12 +273,10 @@ By default, the Spreadsheet control provides an option to browse files from the } ``` -**Client Side**: - ```js // Fetch call to server to load the Excel file. - fetch('https://localhost:{{Your port number}}/Home/Open', { + fetch('Home/Open', { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -295,12 +291,7 @@ By default, the Spreadsheet control provides an option to browse files from the ``` -You can find the server endpoint code to fetch and process the Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). After launching the server endpoint, you need to update the URL on the client side sample as shown below. - -```js -// To open an Excel file from the server. -fetch('https://localhost:{port number}/Home/Open') -``` +You can find the server endpoint code to fetch and process the Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). ### External workbook confirmation dialog @@ -551,8 +542,6 @@ The following code example shows how to save the spreadsheet data as base64 stri By default, the Spreadsheet control saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the `saveAsJson` method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location. -**Client Side**: - ```js // Convert the spreadsheet workbook to JSON data. @@ -564,7 +553,7 @@ By default, the Spreadsheet control saves the Excel file and downloads it to the formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook)); formData.append('PdfLayoutSettings', JSON.stringify({ FitSheetOnOnePage: false })); // Using fetch to invoke the save process. - fetch('https://localhost:{{Your port number}}/Home/Save', { + fetch('Home/Save', { method: 'POST', body: formData }).then((response) => { @@ -574,8 +563,6 @@ By default, the Spreadsheet control saves the Excel file and downloads it to the ``` -**Server Endpoint**: - ```csharp public string Save(SaveSettings saveSettings) @@ -607,12 +594,7 @@ By default, the Spreadsheet control saves the Excel file and downloads it to the ``` -You can find the server endpoint code to save the spreadsheet data as an Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). After launching the server endpoint, you need to update the URL on the client side sample as shown below. - -```js -//To save an Excel file to the server. -fetch('https://localhost:{port number}/Home/Save') -``` +You can find the server endpoint code to save the spreadsheet data as an Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). ### Supported file formats @@ -651,7 +633,6 @@ To save the Spreadsheet document as an `xlsx, xls, csv, or pdf` file, by using ` {% endif %} - ## Server Configuration In Spreadsheet component, import and export operation processed in `server-side`, to use importing and exporting in your projects, it is required to create a server with any of the following web services.