From 44bc8a2eedffbf4090bdd6f432dcb20613a1bf42 Mon Sep 17 00:00:00 2001
From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com>
Date: Tue, 16 Jul 2024 14:31:56 +0530
Subject: [PATCH 1/3] 897088: Ported AWS lambda section and rearranged
 open-save section.

---
 ej2-asp-core-mvc/spreadsheet/open-save.md | 455 +++++++++++++++++-----
 1 file changed, 364 insertions(+), 91 deletions(-)

diff --git a/ej2-asp-core-mvc/spreadsheet/open-save.md b/ej2-asp-core-mvc/spreadsheet/open-save.md
index 50026e0793..197ba7e95e 100644
--- a/ej2-asp-core-mvc/spreadsheet/open-save.md
+++ b/ej2-asp-core-mvc/spreadsheet/open-save.md
@@ -59,6 +59,35 @@ Find the below table for the beforeOpen event arguments.
 N> * Use `Ctrl + O` keyboard shortcut to open Excel documents.
 <br/> * The default value of the [allowOpen](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowOpen) property is `true`. For demonstration purpose, we have showcased the [allowOpen](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowOpen) property in previous code snippet.
 
+### Open an excel file using a file uploader
+
+If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the `success` event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's `open` method to see the appropriate output.
+
+The following code example shows how to import an excel document using file uploader in spreadsheet.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/open-uploader/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Opencontroller.cs" %}
+{% include code-snippet/spreadsheet/open-uploader/opencontroller.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/open-uploader/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Opencontroller.cs" %}
+{% include code-snippet/spreadsheet/open-uploader/opencontroller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
 ### Open an external URL excel file while initial load
 
 You can achieve to access the remote excel file by using the [`created`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_Created) event. In this event you can fetch the excel file and convert it to a blob. Convert this blob to a file and `open` this file by using Spreadsheet component open method.
@@ -86,18 +115,69 @@ You can achieve to access the remote excel file by using the [`created`](https:/
 {% endtabs %}
 {% endif %}
 
-### To add custom header during open
+### Open an excel file using a hosted web service in AWS Lambda
 
-You can add your own custom header to the open action in the Spreadsheet. For processing the data, it has to be sent from server to client side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`beforeOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeOpen) event, the custom header can be added to the request during open action.
+Before proceeding with the opening process, you should deploy the spreadsheet open/save web API service in AWS Lambda. To host the open/save web service in the AWS Lambda environment, please refer to the following KB documentation.
+
+After deployment, you will get the AWS service URL for the open and save actions. Before opening the Excel file with this hosted open URL, you need to prevent the default file opening process to avoid getting a corrupted file on the open service end. The spreadsheet component appends the file to the `formData` and sends it to the open service, which causes the file to get corrupted. To prevent this, set the `args.cancel` value to `true` in the [`beforeOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeOpen) event. After that, you will get the selected file in the `beforeOpen` event argument. Then, convert this file into a base64 string and send it to the open service URL using a fetch request.
+
+On the open service end, convert the base64 string back to a file and pass it as an argument to the workbook `Open` method. The open service will process the file and return the spreadsheet data in JSON format. You will then receive this JSON data in the fetch success callback. Finally, use the `openFromJson` method to load this JSON data into the spreadsheet component.
+
+The following code example shows how to open an Excel file using a hosted web service in AWS Lambda, as mentioned above.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/open-header/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Opencontroller.cs" %}
-{% include code-snippet/spreadsheet/open-header/opencontroller.cs %}
+
+<ejs-spreadsheet id="spreadsheet" openUrl="https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open" allowOpen = "true" beforeOpen="beforeOpen">
+
+</ejs-spreadsheet>
+
+<script>
+
+    function beforeOpen(eventArgs) {
+        var spreadsheet = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
+        eventArgs.cancel = true; // To prevent the default open action.
+        if (eventArgs.file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(eventArgs.file);
+            reader.onload = () => {
+                // Removing the xlsx file content-type.
+                const base64Data = reader.result.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', '');
+                openExcel({
+                    file: base64Data,
+                    extension: eventArgs.file.name.slice(eventArgs.file.name.lastIndexOf('.') + 1),
+                    password: eventArgs.password || ''
+                });
+            };
+        }
+    }
+    function openExcel (requestData) {
+        // Fetch call to AWS server for open processing.
+        fetch('https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json, text/plain',
+                'Content-Type': 'application/json;charset=UTF-8'
+            },
+            body: JSON.stringify(requestData)
+        }).then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+        }).then((data) => {
+            // Loading the JSON data into our spreadsheet.
+            if (data.Workbook && data.Workbook.sheets) {
+                spreadsheet.openFromJson({ file: data });
+            }
+        }).catch((error) => {
+            console.log(error);
+        });
+    };
+
+</script>
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -105,26 +185,73 @@ You can add your own custom header to the open action in the Spreadsheet. For pr
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/open-header/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Opencontroller.cs" %}
-{% include code-snippet/spreadsheet/open-header/opencontroller.cs %}
+```
+@Html.EJS().Spreadsheet("spreadsheet").OpenUrl("https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open").AllowOpen(true).BeforeOpen("beforeOpen").Render()
+
+<script>
+
+    function beforeOpen(eventArgs) {
+        var spreadsheet = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
+        eventArgs.cancel = true; // To prevent the default open action.
+        if (eventArgs.file) {
+            const reader = new FileReader();
+            reader.readAsDataURL(eventArgs.file);
+            reader.onload = () => {
+                // Removing the xlsx file content-type.
+                const base64Data = reader.result.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', '');
+                openExcel({
+                    file: base64Data,
+                    extension: eventArgs.file.name.slice(eventArgs.file.name.lastIndexOf('.') + 1),
+                    password: eventArgs.password || ''
+                });
+            };
+        }
+    }
+    function openExcel (requestData) {
+        // Fetch call to AWS server for open processing.
+        fetch('https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json, text/plain',
+                'Content-Type': 'application/json;charset=UTF-8'
+            },
+            body: JSON.stringify(requestData)
+        }).then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+        }).then((data) => {
+            // Loading the JSON data into our spreadsheet.
+            if (data.Workbook && data.Workbook.sheets) {
+                spreadsheet.openFromJson({ file: data });
+            }
+        }).catch((error) => {
+            console.log(error);
+        });
+    };
+
+</script>
+```
 {% endhighlight %}
+
 {% endtabs %}
 {% endif %}
 
-### Open excel file into a read-only mode
 
-You can open excel file into a read-only mode by using the [`openComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenComplete) event. In this event, you must protect all the sheets and lock its used range cells by using `protectSheet` and `lockCells` methods.
+### Open an excel file from Base64 string data
+
+In the Syncfusion Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the `open` method in the spreadsheet.
+
+The following code example shows how to open the spreadsheet data as base64 string.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/open-readonly/tagHelper %}
+{% include code-snippet/spreadsheet/base-64-string/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Opencontroller.cs" %}
-{% include code-snippet/spreadsheet/open-readonly/opencontroller.cs %}
+{% highlight c# tabtitle="OpenController.cs" %}
+{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -132,28 +259,26 @@ You can open excel file into a read-only mode by using the [`openComplete`](http
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/open-readonly/razor %}
+{% include code-snippet/spreadsheet/base-64-string/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Opencontroller.cs" %}
-{% include code-snippet/spreadsheet/open-readonly/opencontroller.cs %}
+{% highlight c# tabtitle="OpenController.cs" %}
+{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %}
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
 
-### Open an excel file using a file uploader
-
-If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the `success` event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's `open` method to see the appropriate output.
+### Open excel file into a read-only mode
 
-The following code example shows how to import an excel document using file uploader in spreadsheet.
+You can open excel file into a read-only mode by using the [`openComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenComplete) event. In this event, you must protect all the sheets and lock its used range cells by using `protectSheet` and `lockCells` methods.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/open-uploader/tagHelper %}
+{% include code-snippet/spreadsheet/open-readonly/tagHelper %}
 {% endhighlight %}
 {% highlight c# tabtitle="Opencontroller.cs" %}
-{% include code-snippet/spreadsheet/open-uploader/opencontroller.cs %}
+{% include code-snippet/spreadsheet/open-readonly/opencontroller.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -161,10 +286,10 @@ The following code example shows how to import an excel document using file uplo
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/open-uploader/razor %}
+{% include code-snippet/spreadsheet/open-readonly/razor %}
 {% endhighlight %}
 {% highlight c# tabtitle="Opencontroller.cs" %}
-{% include code-snippet/spreadsheet/open-uploader/opencontroller.cs %}
+{% include code-snippet/spreadsheet/open-readonly/opencontroller.cs %}
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
@@ -218,20 +343,18 @@ The following code snippet demonstrates how to configure the deserialization opt
 {% endtabs %}
 {% endif %}
 
-### Open an excel file from Base64 string data
+### Add custom header during open
 
-In the Syncfusion Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the `open` method in the spreadsheet.
-
-The following code example shows how to open the spreadsheet data as base64 string.
+You can add your own custom header to the open action in the Spreadsheet. For processing the data, it has to be sent from server to client side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`beforeOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeOpen) event, the custom header can be added to the request during open action.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/base-64-string/tagHelper %}
+{% include code-snippet/spreadsheet/open-header/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="OpenController.cs" %}
-{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %}
+{% highlight c# tabtitle="Opencontroller.cs" %}
+{% include code-snippet/spreadsheet/open-header/opencontroller.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -239,10 +362,10 @@ The following code example shows how to open the spreadsheet data as base64 stri
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/base-64-string/razor %}
+{% include code-snippet/spreadsheet/open-header/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="OpenController.cs" %}
-{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %}
+{% highlight c# tabtitle="Opencontroller.cs" %}
+{% include code-snippet/spreadsheet/open-header/opencontroller.cs %}
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
@@ -326,45 +449,83 @@ N> * Use `Ctrl + S` keyboard shortcut to save the Spreadsheet data as Excel file
 <br/> * The default value of [allowSave](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowSave) property is `true`. For demonstration purpose, we have showcased the [allowSave](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_AllowSave) property in previous code snippet.
 <br/> * Demo purpose only, we have used the online web service url link.
 
-### To send and receive custom params from client to server
+### Save an excel file using a hosted web service in AWS Lambda
 
-Passing the custom parameters from client to server by using [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event.
+Before proceeding with the save process, you should deploy the spreadsheet open/save web API service in AWS Lambda. To host the open/save web service in the AWS Lambda environment, please refer to the following KB documentation.
 
-{% if page.publishingplatform == "aspnet-core" %}
+After deployment, you will get the AWS service URL for the open and save actions. Before saving the Excel file with this hosted save URL, you need to prevent the default save action to avoid getting a corrupted excel file on the client end. The save service returns the file stream as a result to the client, which can cause the file to become corrupted. To prevent this, set the `args.cancel` value to `true` in the [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event. After that, convert the spreadsheet data into JSON format using the `saveAsJson` method in the `beforeSave` event and send it to the save service endpoint URL using a fetch request.
 
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/custom-params/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="CustomParamsController.cs" %}
-{% include code-snippet/spreadsheet/custom-params/customParamsController.cs %}
-{% endhighlight %}
-{% endtabs %}
+On the server side, the save service will take the received JSON data, pass it to the workbook `Save` method, and return the result as a base64 string. The fetch success callback will receive the Excel file in base64 string format on the client side. Finally, you can then convert the base64 string back to a file on the client end to obtain a non-corrupted Excel file.
 
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/custom-params/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="CustomParamsController.cs" %}
-{% include code-snippet/spreadsheet/custom-params/customParamsController.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-### To add custom header during save
-
-You can add your own custom header to the save action in the Spreadsheet. For processing the data, it has to be sent from client to server side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`fileMenuItemSelect`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_FileMenuItemSelect) event, the custom header can be added to the request during save action.
+The following code example shows how to save an Excel file using a hosted web service in AWS Lambda, as mentioned above.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/save-header/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="CustomHeaderController.cs" %}
-{% include code-snippet/spreadsheet/save-header/CustomHeaderController.cs %}
+
+<ejs-spreadsheet id="spreadsheet" saveUrl="https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save" allowSave = "true" beforeSave="beforeSave">
+
+</ejs-spreadsheet>
+
+<script>
+    var spreadsheet = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
+    var saveInitiated;
+    function beforeSave(eventArgs) {
+        if (!saveInitiated) {
+            eventArgs.cancel = true; // Preventing default save action.
+            saveInitiated = true; // The "beforeSave" event will trigger for "saveAsJson" action also, so we are preventing for the "saveAsJson".
+            saveAsExcel(eventArgs);
+        }
+    };
+    function saveAsExcel(eventArgs) {
+        // Convert the spreadsheet workbook to JSON data.
+        spreadsheet.saveAsJson().then(Json => {
+            saveInitiated = false;
+            const formData = new FormData();
+            // Passing the JSON data to server to perform save operation.
+            formData.append('JSONData', JSON.stringify(Json.jsonObject.Workbook));
+            formData.append('saveType', 'Xlsx');
+            formData.append('fileName', 'Worksheet');
+            formData.append('pdfLayoutSettings', '{"fitSheetOnOnePage":false,"orientation":"Portrait"}');
+            // Using fetch API to invoke the server for save processing.
+            fetch('https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save', {
+                method: 'POST', body: formData
+            }).then(response => {
+                if (response.ok) {
+                    return response.blob();
+                }
+            }).then(data => {
+                const reader = new FileReader();
+                reader.onload = function () {
+                    //Converts the result of the file reading operation into a base64 string.
+                    const textBase64Str = reader.result.toString();
+                    //Converts the base64 string into a Excel base64 string.
+                    const excelBase64Str = atob(textBase64Str.replace('data:text/plain;base64,', ''));
+                    //Converts the Excel base64 string into byte characters.
+                    const byteCharacters = atob(excelBase64Str.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', ''));
+                    const byteArrays = [];
+                    for (let i = 0; i < byteCharacters.length; i++) {
+                        byteArrays.push(byteCharacters.charCodeAt(i));
+                    }
+                    const byteArray = new Uint8Array(byteArrays);
+                    //creates a blob data from the byte array with xlsx content type.
+                    const blobData = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+                    const blobUrl = URL.createObjectURL(blobData);
+                    const anchor = document.createElement('a');
+                    anchor.download = 'Sample.xlsx';
+                    anchor.href = blobUrl;
+                    document.body.appendChild(anchor);
+                    anchor.click();
+                    URL.revokeObjectURL(blobUrl);
+                    document.body.removeChild(anchor);
+                }
+                reader.readAsDataURL(data);
+            });
+        });        
+    };
+</script>
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -372,31 +533,88 @@ You can add your own custom header to the save action in the Spreadsheet. For pr
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/save-header/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="CustomHeaderController.cs" %}
-{% include code-snippet/spreadsheet/save-header/CustomHeaderController.cs %}
+```
+@Html.EJS().Spreadsheet("spreadsheet").SaveUrl("https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save").AllowSave(true).BeforeSave("beforeSave").Render()
+
+<script>
+    var spreadsheet = ej.base.getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
+    var saveInitiated;
+    function beforeSave(eventArgs) {
+        if (!saveInitiated) {
+            eventArgs.cancel = true; // Preventing default save action.
+            saveInitiated = true; // The "beforeSave" event will trigger for "saveAsJson" action also, so we are preventing for the "saveAsJson".
+            saveAsExcel(eventArgs);
+        }
+    };
+    function saveAsExcel(eventArgs) {
+        // Convert the spreadsheet workbook to JSON data.
+        spreadsheet.saveAsJson().then(Json => {
+            saveInitiated = false;
+            const formData = new FormData();
+            // Passing the JSON data to server to perform save operation.
+            formData.append('JSONData', JSON.stringify(Json.jsonObject.Workbook));
+            formData.append('saveType', 'Xlsx');
+            formData.append('fileName', 'Worksheet');
+            formData.append('pdfLayoutSettings', '{"fitSheetOnOnePage":false,"orientation":"Portrait"}');
+            // Using fetch API to invoke the server for save processing.
+            fetch('https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save', {
+                method: 'POST', body: formData
+            }).then(response => {
+                if (response.ok) {
+                    return response.blob();
+                }
+            }).then(data => {
+                const reader = new FileReader();
+                reader.onload = function () {
+                    //Converts the result of the file reading operation into a base64 string.
+                    const textBase64Str = reader.result.toString();
+                    //Converts the base64 string into a Excel base64 string.
+                    const excelBase64Str = atob(textBase64Str.replace('data:text/plain;base64,', ''));
+                    //Converts the Excel base64 string into byte characters.
+                    const byteCharacters = atob(excelBase64Str.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', ''));
+                    const byteArrays = [];
+                    for (let i = 0; i < byteCharacters.length; i++) {
+                        byteArrays.push(byteCharacters.charCodeAt(i));
+                    }
+                    const byteArray = new Uint8Array(byteArrays);
+                    //creates a blob data from the byte array with xlsx content type.
+                    const blobData = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+                    const blobUrl = URL.createObjectURL(blobData);
+                    const anchor = document.createElement('a');
+                    anchor.download = 'Sample.xlsx';
+                    anchor.href = blobUrl;
+                    document.body.appendChild(anchor);
+                    anchor.click();
+                    URL.revokeObjectURL(blobUrl);
+                    document.body.removeChild(anchor);
+                }
+                reader.readAsDataURL(data);
+            });
+        });        
+    };
+</script>
+```
 {% endhighlight %}
+
 {% endtabs %}
 {% endif %}
 
-### To change the PDF orientation
+### Save data as a Base64 string
 
-By default, the PDF document is created in **Portrait** orientation. You can change the orientation of the PDF document by using the `args.pdfLayoutSettings.orientation` argument settings in the [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event.
+In the Spreadsheet control, there is currently no direct option to save data as a `Base64` string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a `Base64` string using `FileReader`. 
 
-The possible values are:
+> You can get the Spreadsheet data as blob in the [saveComplete](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveComplete) event when you set the  `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event.
 
-* **Portrait** - Used to display content in a vertical layout.
-* **Landscape** - Used to display content in a horizontal layout.
+The following code example shows how to save the spreadsheet data as base64 string.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/pdf-orientation/tagHelper %}
+{% include code-snippet/spreadsheet/base-64-string/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="pdfOrientationController.cs" %}
-{% include code-snippet/spreadsheet/pdf-orientation/pdfOrientationController.cs %}
+{% highlight c# tabtitle="OpenController.cs" %}
+{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -404,10 +622,10 @@ The possible values are:
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/pdf-orientation/razor %}
+{% include code-snippet/spreadsheet/base-64-string/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="pdfOrientationController.cs" %}
-{% include code-snippet/spreadsheet/pdf-orientation/pdfOrientationController.cs %}
+{% highlight c# tabtitle="OpenController.cs" %}
+{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %}
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
@@ -461,22 +679,45 @@ The following code snippet demonstrates how to configure the serialization optio
 {% endtabs %}
 {% endif %}
 
-### To save data as a Base64 string
+### Send and receive custom params from client to server
 
-In the Spreadsheet control, there is currently no direct option to save data as a `Base64` string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a `Base64` string using `FileReader`. 
+Passing the custom parameters from client to server by using [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event.
 
-> You can get the Spreadsheet data as blob in the [saveComplete](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveComplete) event when you set the  `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.spreadsheet.spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event.
+{% if page.publishingplatform == "aspnet-core" %}
 
-The following code example shows how to save the spreadsheet data as base64 string.
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/custom-params/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="CustomParamsController.cs" %}
+{% include code-snippet/spreadsheet/custom-params/customParamsController.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/custom-params/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="CustomParamsController.cs" %}
+{% include code-snippet/spreadsheet/custom-params/customParamsController.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Add custom header during save
+
+You can add your own custom header to the save action in the Spreadsheet. For processing the data, it has to be sent from client to server side and adding customer header can provide privacy to the data with the help of Authorization Token. Through the [`fileMenuItemSelect`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_FileMenuItemSelect) event, the custom header can be added to the request during save action.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/base-64-string/tagHelper %}
+{% include code-snippet/spreadsheet/save-header/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="OpenController.cs" %}
-{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %}
+{% highlight c# tabtitle="CustomHeaderController.cs" %}
+{% include code-snippet/spreadsheet/save-header/CustomHeaderController.cs %}
 {% endhighlight %}
 {% endtabs %}
 
@@ -484,10 +725,42 @@ The following code example shows how to save the spreadsheet data as base64 stri
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/spreadsheet/base-64-string/razor %}
+{% include code-snippet/spreadsheet/save-header/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="OpenController.cs" %}
-{% include code-snippet/spreadsheet/base-64-string/opencontroller.cs %}
+{% highlight c# tabtitle="CustomHeaderController.cs" %}
+{% include code-snippet/spreadsheet/save-header/CustomHeaderController.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Change the PDF orientation
+
+By default, the PDF document is created in **Portrait** orientation. You can change the orientation of the PDF document by using the `args.pdfLayoutSettings.orientation` argument settings in the [`beforeSave`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_BeforeSave) event.
+
+The possible values are:
+
+* **Portrait** - Used to display content in a vertical layout.
+* **Landscape** - Used to display content in a horizontal layout.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/pdf-orientation/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="pdfOrientationController.cs" %}
+{% include code-snippet/spreadsheet/pdf-orientation/pdfOrientationController.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/spreadsheet/pdf-orientation/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="pdfOrientationController.cs" %}
+{% include code-snippet/spreadsheet/pdf-orientation/pdfOrientationController.cs %}
 {% endhighlight %}
 {% endtabs %}
 {% endif %}

From c19236ca709ed1193cf5a67f2dc3e89462bfb30d Mon Sep 17 00:00:00 2001
From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com>
Date: Tue, 16 Jul 2024 17:45:32 +0530
Subject: [PATCH 2/3] 897088: Addressed the review comments.

---
 ej2-asp-core-mvc/spreadsheet/open-save.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/ej2-asp-core-mvc/spreadsheet/open-save.md b/ej2-asp-core-mvc/spreadsheet/open-save.md
index 197ba7e95e..d20e89f145 100644
--- a/ej2-asp-core-mvc/spreadsheet/open-save.md
+++ b/ej2-asp-core-mvc/spreadsheet/open-save.md
@@ -130,6 +130,7 @@ The following code example shows how to open an Excel file using a hosted web se
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
 
+```
 <ejs-spreadsheet id="spreadsheet" openUrl="https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open" allowOpen = "true" beforeOpen="beforeOpen">
 
 </ejs-spreadsheet>
@@ -177,6 +178,7 @@ The following code example shows how to open an Excel file using a hosted web se
     };
 
 </script>
+```
 
 {% endhighlight %}
 {% endtabs %}
@@ -185,6 +187,7 @@ The following code example shows how to open an Excel file using a hosted web se
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
+
 ```
 @Html.EJS().Spreadsheet("spreadsheet").OpenUrl("https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open").AllowOpen(true).BeforeOpen("beforeOpen").Render()
 
@@ -232,12 +235,12 @@ The following code example shows how to open an Excel file using a hosted web se
 
 </script>
 ```
+
 {% endhighlight %}
 
 {% endtabs %}
 {% endif %}
 
-
 ### Open an excel file from Base64 string data
 
 In the Syncfusion Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the `open` method in the spreadsheet.
@@ -464,6 +467,7 @@ The following code example shows how to save an Excel file using a hosted web se
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
 
+```
 <ejs-spreadsheet id="spreadsheet" saveUrl="https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save" allowSave = "true" beforeSave="beforeSave">
 
 </ejs-spreadsheet>
@@ -525,6 +529,7 @@ The following code example shows how to save an Excel file using a hosted web se
         });        
     };
 </script>
+```
 
 {% endhighlight %}
 {% endtabs %}
@@ -533,6 +538,7 @@ The following code example shows how to save an Excel file using a hosted web se
 
 {% tabs %}
 {% highlight razor tabtitle="CSHTML" %}
+
 ```
 @Html.EJS().Spreadsheet("spreadsheet").SaveUrl("https://xxxxxxxxxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/save").AllowSave(true).BeforeSave("beforeSave").Render()
 
@@ -594,6 +600,7 @@ The following code example shows how to save an Excel file using a hosted web se
     };
 </script>
 ```
+
 {% endhighlight %}
 
 {% endtabs %}

From 661d26e6fcb5d3085b2bb5c6bc08b74d4ba16fd3 Mon Sep 17 00:00:00 2001
From: DinakarSF4212 <147583019+DinakarSF4212@users.noreply.github.com>
Date: Tue, 16 Jul 2024 18:48:26 +0530
Subject: [PATCH 3/3] 897088: Addressed the review comments.

---
 ej2-asp-core-mvc/spreadsheet/open-save.md | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/ej2-asp-core-mvc/spreadsheet/open-save.md b/ej2-asp-core-mvc/spreadsheet/open-save.md
index d20e89f145..0623baec11 100644
--- a/ej2-asp-core-mvc/spreadsheet/open-save.md
+++ b/ej2-asp-core-mvc/spreadsheet/open-save.md
@@ -127,9 +127,6 @@ The following code example shows how to open an Excel file using a hosted web se
 
 {% if page.publishingplatform == "aspnet-core" %}
 
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-
 ```
 <ejs-spreadsheet id="spreadsheet" openUrl="https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open" allowOpen = "true" beforeOpen="beforeOpen">
 
@@ -180,14 +177,8 @@ The following code example shows how to open an Excel file using a hosted web se
 </script>
 ```
 
-{% endhighlight %}
-{% endtabs %}
-
 {% elsif page.publishingplatform == "aspnet-mvc" %}
 
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-
 ```
 @Html.EJS().Spreadsheet("spreadsheet").OpenUrl("https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open").AllowOpen(true).BeforeOpen("beforeOpen").Render()
 
@@ -236,9 +227,6 @@ The following code example shows how to open an Excel file using a hosted web se
 </script>
 ```
 
-{% endhighlight %}
-
-{% endtabs %}
 {% endif %}
 
 ### Open an excel file from Base64 string data