You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Document-Processing/Excel/Spreadsheet/React/Save-Excel-File/to-azure-blob-storage.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,7 +23,7 @@ Start by following the steps provided in this [link](https://help.syncfusion.com
23
23
24
24
3. Import the required namespaces at the top of the file:
25
25
26
-
```Csharp
26
+
```csharp
27
27
28
28
usingSystem;
29
29
usingSystem.IO;
@@ -37,7 +37,7 @@ using Azure.Storage.Blobs;
37
37
38
38
4. Add the following private fields and constructor parameters to the `SpreadsheetController` class, In the constructor, assign the values from the configuration to the corresponding fields.
39
39
40
-
```Csharp
40
+
```csharp
41
41
42
42
privatereadonlystring_storageConnectionString;
43
43
privatereadonlystring_storageContainerName;
@@ -52,7 +52,7 @@ public SpreadsheetController(IConfiguration configuration)
52
52
53
53
5. Create the `SaveToAzure()` method to save the document to the Azure Blob storage.
54
54
55
-
```Csharp
55
+
```csharp
56
56
57
57
[HttpPost]
58
58
[Route("SaveToAzure")]
@@ -92,7 +92,7 @@ N> Note: Install the Azure.Storage.Blobs NuGet package in the service project. E
92
92
93
93
**Step 3:** Modify the index File in the Spreadsheet sample to using [`saveAsJson`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveasjson) method to serialize the spreadsheet and send it to the back-end
Copy file name to clipboardExpand all lines: Document-Processing/Excel/Spreadsheet/React/Server-Deployment/spreadsheet-server-docker-image-overview.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ control: Docker deployment
7
7
documentation: ug
8
8
---
9
9
10
-
# Spreadsheet server docker image overview in React Spreadsheet
10
+
# Docker Image Overview in React Spreadsheet
11
11
12
12
The [**Syncfusion<supstyle="font-size:70%">®</sup> Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) is a feature-rich control for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, filtering, importing, and exporting Excel documents.
Copy file name to clipboardExpand all lines: Document-Processing/Excel/Spreadsheet/React/open-excel-files.md
+26-10Lines changed: 26 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,13 @@ documentation: ug
9
9
10
10
# Open Excel Files in Syncfusion React Spreadsheet
11
11
12
-
The Syncfusion React Spreadsheet allows you to open Excel files (.xlsx) by reading the file, converting it into the client‑side Spreadsheet model, and rendering it with full support for data, styles, formats, and more.
12
+
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.
13
13
14
-
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 th [`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.
14
+
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.
15
+
16
+
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.
17
+
18
+
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.
15
19
16
20
For a quick walkthrough on how the open functionality works, refer to the following video:
Please find the below table for the beforeOpen event arguments.
40
+
Please find the below table for the [beforeOpen](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforeopen) event arguments.
41
+
42
+
## BeforeOpenEventArgs – Properties
37
43
38
-
|**Parameter**|**Type**|**Description**|
39
-
| ----- | ----- | ----- |
40
-
| file | FileList or string or File | To get the file stream. `FileList` - contains length and item index. <br/> `File` - specifies the file lastModified and file name. |
41
-
| cancel | boolean | To prevent the open operation. |
42
-
| requestData | object | To provide the Form data. |
|**cancel**|`boolean`| Specifies whether the open action should be canceled. |
47
+
|**file**|`FileList`\|`string`\|`File`| Specifies the file to be opened. |
48
+
|**parseOptions**|[`WorkbookParseOptions`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/workbookparseoptions)| Specifies the parsing options that control how the Excel file is interpreted during loading. |
49
+
|**password**|`string`| Specifies the password required to open the Excel file, if it is protected. |
50
+
|**requestData**| object | Specifies any additional data sent along with the open request. |
51
+
|**requestType**|`string`| Specifies the type of open request that triggered the **beforeOpen** event. Possible values:<br><br>• **initial** – The default request made when loading a workbook.<br>• **chunk** – A follow‑up request to load a portion of the workbook when chunking is enabled and the server provides a chunk plan.<br>• **thresholdLimitConfirmed** – A request made after the user confirms a threshold warning (such as *maximumDataLimit* or *maximumFileSizeLimit*) and chooses to proceed. |
43
52
44
53
> * Use `Ctrl + O` keyboard shortcut to open Excel documents.
45
54
> * The default value of the [allowOpen](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowopen) property is `true`. For demonstration purpose, we have showcased the [allowOpen](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowopen) property in previous code snippet.
@@ -48,6 +57,13 @@ Please find the below table for the beforeOpen event arguments.
48
57
49
58
To open Excel files programmatically in the Spreadsheet, you can use the [`open`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#open) method of the Spreadsheet component. Before invoking this method, ensure that the [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) property is properly configured, as it is required for processing the file on the server.
50
59
60
+
Please find the table below for the [`open`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#open) method arguments.
| options |[OpenOptions](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/openOptions)| Options for opening the excel file. |
65
+
66
+
51
67
The following code example demonstrates how to open an Excel file programmatically in the Spreadsheet.
52
68
53
69
```js
@@ -97,9 +113,9 @@ The following Excel file formats are supported for opening in the Spreadsheet co
97
113
98
114
### Open Excel files from local system
99
115
100
-
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/react/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/react/documentation/api/spreadsheet/index-default#open) method to see the appropriate output.
116
+
If you explore your machine to select and upload an Excel document using the file upload component, you will receive the uploaded document as a raw file in the [success](https://ej2.syncfusion.com/react/documentation/api/uploader/index-default#success) event of the file upload component. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#open) method to see the appropriate output.
101
117
102
-
The following code example shows how to import an Excel document using file uploader in spreadsheet.
118
+
The following code example shows how to import an Excel document using file upload component in spreadsheet.
Copy file name to clipboardExpand all lines: Document-Processing/Excel/Spreadsheet/React/save-excel-files.md
+13-2Lines changed: 13 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,11 @@ documentation: ug
9
9
10
10
# Save Excel Files in Syncfusion React Spreadsheet
11
11
12
-
The Syncfusion React Spreadsheet allows you to save spreadsheet data as Excel files by sending the client‑side Spreadsheet model to the server, where it is processed and exported with full support for data, styles, formats, and more.
12
+
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.
13
+
14
+
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.
15
+
16
+
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.
13
17
14
18
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.
15
19
@@ -33,7 +37,7 @@ The following sample shows the `Save` option by using the [`saveUrl`](https://ej
Please find the below table for the beforeSave event arguments.
40
+
Please find the below table for the [`beforeSave`](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#beforesave) event arguments.
37
41
38
42
|**Parameter**|**Type**|**Description**|
39
43
| ----- | ----- | ----- |
@@ -54,6 +58,13 @@ Please find the below table for the beforeSave event arguments.
54
58
55
59
To save Excel files programmatically in the Spreadsheet, you can use the [`save`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#save) method of the Spreadsheet component. Before invoking this method, ensure that the [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) property is properly configured, as it is required for processing and generating the file on the server.
56
60
61
+
Please find the below table for the [`save`](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#save) method arguments.
| options |[`SaveOptions`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/saveoptions)| Options for opening the JSON object. |
66
+
| jsonConfig *(optional)*|[`SerializationOptions`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/serializationOptions)| Specify the serialization options to customize the loading of the JSON data. |
67
+
57
68
The following code example demonstrates how to save an Excel file programmatically in the Spreadsheet.
0 commit comments