1003858: Reorganized open-save spreadsheet samples

Document-Processing-toc.html

@@ -5224,7 +5224,28 @@
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/overview">Overview</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/getting-started">Getting Started</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/data-binding">Data Binding</a></li>
-							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/open-save">Open and Save</a></li>
+							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/open/open">Open</a>
+								<li>Open Excel File
+									<ul>
+										<li><a href="/document-processing/excel/spreadsheet/javascript-es6/open/open-excel-file/file-uploader">using a file uploader</a></li>
+										<li><a href="/document-processing/excel/spreadsheet/javascript-es6/open/open-excel-file/external-url">using an external URL</a></li>
+										<li><a href="/document-processing/excel/spreadsheet/javascript-es6/open/open-excel-file/blob-data">from blob data</a></li>
+										<li><a href="/document-processing/excel/spreadsheet/javascript-es6/open/open-excel-file/base64-string">from base64 string</a></li>
+										<li><a href="/document-processing/excel/spreadsheet/javascript-es6/open/open-excel-file/server">located on a server</a></li>
+										<li><a href="/document-processing/excel/spreadsheet/javascript-es6/open/open-excel-file/aws-lambda">using AWS Lambda hosted web service</a></li>
+									</ul>
+								</li>
+							</li>
+							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/save/save">Save</a>
+								<li>Save Excel File
+									<ul>
+										<li><a href="/document-Processing/excel/spreadsheet/javascript-es6/save/save-excel-file/blob-data">as blob data</a></li>
+										<li><a href="/document-Processing/excel/spreadsheet/javascript-es6/save/save-excel-file/base64-string">as base64 string</a></li>
+										<li><a href="/document-Processing/excel/spreadsheet/javascript-es6/save/save-excel-file/server">to a server</a></li>
+										<li><a href="/document-Processing/excel/spreadsheet/javascript-es6/save/save-excel-file/aws-lambda">using AWS Lambda hosted web service</a></li>
+									</ul>
+								</li>
+							</li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/docker-deployment">Docker Deployment</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/worksheet">Worksheet</a></li>
 							<li><a href="/document-processing/excel/spreadsheet/javascript-es6/cell-range">Cell Range</a></li>

Document-Processing/Excel/Spreadsheet/Javascript-ES6/Open/Open-Excel-File/aws-lambda.md

@@ -0,0 +1,97 @@
+---
+layout: post
+title: Open using Lambda in JavaScript (ES6) Spreadsheet Editor | Syncfusion
+description: Learn here all about opening Excel files using AWS Lambda in javascript(ES6) Spreadsheet editor of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: Open Excel using AWS Lambda
+documentation: ug
+---
+
+# Open an excel file using a hosted web service in AWS Lambda
+
+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.
+
+[How to deploy a spreadsheet open and save web API service to AWS Lambda](https://support.syncfusion.com/kb/article/17184/how-to-deploy-a-spreadsheet-open-and-save-web-api-service-to-aws-lambda)
+
+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://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#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](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#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.
+
+```ts
+import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
+
+//Initialize Spreadsheet component
+let spreadsheet: Spreadsheet = new Spreadsheet({
+    sheets: [
+    ],
+    openUrl: 'https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open',
+    beforeOpen: (eventArgs) => {
+        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: any = 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 || ''
+                });
+            };
+        }
+    }
+});
+const 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);
+    });
+};
+
+//Render initialized Spreadsheet component
+spreadsheet.appendTo('#spreadsheet');
+
+```
+
+```csharp
+public IActionResult Open(OpenOptions openOptions)
+{
+    // Convert the base64 string to bytes array.
+    byte[] bytes = Convert.FromBase64String(openOptions.File);
+    // Loading the bytes array to stream.
+    MemoryStream stream = new MemoryStream(bytes);
+    OpenRequest open = new OpenRequest();
+    // Converting the stream into FormFile.
+    open.File = new FormFile(stream, 0, bytes.Length, "Sample", "Sample." + openOptions.Extension);
+    if (string.IsNullOrEmpty(openOptions.Password))
+        open.Password = openOptions.Password;
+    var result = Workbook.Open(open);
+    return Content(result);
+}
+
+public class OpenOptions
+{
+    public string File { get; set; } = string.Empty;
+    public string Password { get; set; } = string.Empty;
+    public string Extension { get; set; } = string.Empty;
+}
+```

Document-Processing/Excel/Spreadsheet/Javascript-ES6/Open/Open-Excel-File/base64-string.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Open from Base64 in JavaScript (ES6) Spreadsheet Editor | Syncfusion
+description: Learn here all about how to Open an excel file from Base64 string data in javascript(ES6) Spreadsheet editor of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: base64
+documentation: ug
+---
+
+# Open an excel file from Base64 string data
+
+In the Syncfusion<sup style="font-size:70%">&reg;</sup> 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](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#open) method in the spreadsheet.
+
+The following code example shows how to save the spreadsheet data as base64 string.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/javascript-es6/base-64-string/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/javascript-es6/base-64-string/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/base-64-string" %}

Document-Processing/Excel/Spreadsheet/Javascript-ES6/Open/Open-Excel-File/blob-data.md

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Open from Blob in JavaScript (ES6) Spreadsheet Editor | Syncfusion
+description: Learn here all about how to Open an excel file from blob data in javascript(ES6) Spreadsheet editor of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: blob data
+documentation: ug
+---
+
+# Open an excel file from blob data
+
+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 open an Excel file from blob data, you need to fetch the blob data from the server or another source and convert this blob data into a `File` object. Then, you can use the [open](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#open) method in the Spreadsheet control to load that `File` object.
+
+Please find the code to fetch the blob data and load it into the Spreadsheet control below.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/javascript-es6/open-from-blobdata-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/javascript-es6/open-from-blobdata-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/open-from-blobdata-cs1" %}

Document-Processing/Excel/Spreadsheet/Javascript-ES6/Open/Open-Excel-File/external-url.md

@@ -0,0 +1,23 @@
+---
+layout: post
+title: Open from URL in JavaScript (ES6) Spreadsheet Editor | Syncfusion
+description: Learn here all about Open an external URL excel file while initial load in javascript(ES6) Spreadsheet editor of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: external url
+documentation: ug
+---
+
+# Open an external URL excel file while initial load
+
+You can achieve to access the remote excel file by using the [`created`](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#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`](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#open) this file by using Spreadsheet component open method.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/javascript-es6/open-save-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/javascript-es6/open-save-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/open-save-cs2" %}

Document-Processing/Excel/Spreadsheet/Javascript-ES6/Open/Open-Excel-File/file-uploader.md

@@ -0,0 +1,23 @@
+---
+layout: post
+title: Open from Uploader in JavaScript (ES6) Spreadsheet Editor | Syncfusion
+description: Learn here all about Open an excel file using a file uploader in javascript(ES6) Spreadsheet editor of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control:  file uploader
+documentation: ug
+---
+
+# 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](https://ej2.syncfusion.com/documentation/api/uploader/index-default#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](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#open) method to see the appropriate output.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/javascript-es6/import-using-uploader/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/javascript-es6/import-using-uploader/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "/document-processing/code-snippet/spreadsheet/javascript-es6/import-using-uploader" %}

Document-Processing/Excel/Spreadsheet/Javascript-ES6/Open/Open-Excel-File/server.md

@@ -0,0 +1,63 @@
+---
+layout: post
+title: Open from Server in JavaScript (ES6) Spreadsheet Editor | Syncfusion
+description: Learn here all about Open an Excel file located on a server in javascript(ES6) Spreadsheet editor of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: server
+documentation: ug
+---
+
+# Open an Excel file located on a server
+
+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](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#openfromjson) method to load that `JSON data` into the Spreadsheet control.
+
+**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".
+        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**:
+
+```js
+
+    // Fetch call to server to load the Excel file.
+    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 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')
+```