Skip to content

Commit b016fc3

Browse files
Merge pull request #2288 from syncfusion-content/EJ2-1011162-new-dev
documentation(EJ2-1011162): Revamp the “Open and Save” Section in the React Spreadsheet UG Documentation
2 parents 356bff7 + a3394ea commit b016fc3

16 files changed

Lines changed: 128 additions & 139 deletions

Document-Processing-toc.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5208,25 +5208,25 @@
52085208
<li><a href="/document-processing/excel/spreadsheet/react/getting-started">Getting Started</a></li>
52095209
<li><a href="/document-processing/excel/spreadsheet/react/nextjs-getting-started">Getting Started with NextJS</a></li>
52105210
<li><a href="/document-processing/excel/spreadsheet/react/data-binding">Data Binding</a></li>
5211-
<li><a href="/document-processing/excel/spreadsheet/react/open-excel-file">Open Excel Files</a>
5211+
<li><a href="/document-processing/excel/spreadsheet/react/open-excel-files">Open Excel Files</a>
52125212
<ul>
5213-
<li><a href="/document-processing/excel/spreadsheet/react/open-excel-files/aws-s3-bucket">From AWS S3</a></li>
5214-
<li><a href="/document-processing/excel/spreadsheet/react/open-excel-files/azure-blob-storage">From Azure Blob Storage</a></li>
5215-
<li><a href="/document-processing/excel/spreadsheet/react/open-excel-files/google-cloud-storage">From Google Cloud Storage</a></li>
5213+
<li><a href="/document-processing/excel/spreadsheet/react/open-excel-file/from-aws-s3-bucket">From AWS S3</a></li>
5214+
<li><a href="/document-processing/excel/spreadsheet/react/open-excel-file/from-azure-blob-storage">From Azure Blob Storage</a></li>
5215+
<li><a href="/document-processing/excel/spreadsheet/react/open-excel-file/from-google-cloud-storage">From Google Cloud Storage</a></li>
52165216
</ul>
52175217
</li>
5218-
<li><a href="/document-processing/excel/spreadsheet/react/save-excel-file">Save Excel Files</a>
5218+
<li><a href="/document-processing/excel/spreadsheet/react/save-excel-files">Save Excel Files</a>
52195219
<ul>
5220-
<li><a href="/document-processing/excel/spreadsheet/react/save-excel-files/aws-s3-bucket">To AWS S3</a></li>
5221-
<li><a href="/document-processing/excel/spreadsheet/react/save-excel-files/azure-blob-storage">To Azure Blob Storage</a></li>
5222-
<li><a href="/document-processing/excel/spreadsheet/react/save-excel-files/google-cloud-storage">To Google Cloud Storage</a></li>
5220+
<li><a href="/document-processing/excel/spreadsheet/react/save-excel-file/to-aws-s3-bucket">To AWS S3</a></li>
5221+
<li><a href="/document-processing/excel/spreadsheet/react/save-excel-file/to-azure-blob-storage">To Azure Blob Storage</a></li>
5222+
<li><a href="/document-processing/excel/spreadsheet/react/save-excel-file/to-google-cloud-storage">To Google Cloud Storage</a></li>
52235223
</ul>
52245224
</li>
5225-
<li>Server Deployment
5225+
<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/spreadsheet-server-docker-image-overview">Server Deployment</a>
52265226
<ul>
5227-
<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/docker-deployment">Spreadsheet Server Docker Overview</a></li>
5228-
<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/how-to-deploy-spreadsheet-server-to-azure-app-service-using-visual-studio">Deploy Spreadsheet Docker to Azure App Service using Azure CLI</a></li>
5229-
<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/how-to-deploy-spreadsheet-server-to-azure-app-service-using-azure-cli">Publish Spreadsheet Server to Azure App Service using Visual Studio</a></li>
5227+
<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/spreadsheet-server-docker-image-overview">Spreadsheet Server Docker Overview</a></li>
5228+
<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli">Deploy Spreadsheet Docker to Azure App Service using Azure CLI</a></li>
5229+
<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/publish-spreadsheet-server-to-azure-using-visual-studio">Publish Spreadsheet Server to Azure App Service using Visual Studio</a></li>
52305230
</ul>
52315231
</li>
52325232
<li><a href="/document-processing/excel/spreadsheet/react/worksheet">Worksheet</a></li>

Document-Processing/Excel/Spreadsheet/React/Open-Excel-Files/aws-s3-bucket.md renamed to Document-Processing/Excel/Spreadsheet/React/Open-Excel-File/from-aws-s3-bucket.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ To load a file from AWS S3 in a Spreadsheet Component, you can follow the steps
1313

1414
**Step 1:** Create a Simple Spreadsheet Sample in React
1515

16-
Start by following the steps provided in this [link](../../React//getting-started.md) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
16+
Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
1717

1818
**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project
1919

20-
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../../Spreadsheet/React/open-save.md) for instructions on how to create a web service project.
20+
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project.
2121

2222
2. Open the `SpreadsheetController.cs` file in your web service project.
2323

@@ -141,7 +141,7 @@ N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and
141141

142142
**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the AWS S3 bucket into the client-side spreadsheet.
143143

144-
```typescript
144+
```ts
145145

146146
<button class="e-btn" (click)="openFromS3()">Import XLS files from AWS S3 bucket</button>
147147

Document-Processing/Excel/Spreadsheet/React/Open-Excel-Files/azure-blob-storage.md renamed to Document-Processing/Excel/Spreadsheet/React/Open-Excel-File/from-azure-blob-storage.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ To load a file from Azure Blob Storage in a Spreadsheet Component, you can follo
1313

1414
**Step 1:** Create a Simple Spreadsheet Sample in React
1515

16-
Start by following the steps provided in this [link](../../React//getting-started.md) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
16+
Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
1717

1818
**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project
1919

20-
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../../Spreadsheet/React/open-save.md) for instructions on how to create a web service project.
20+
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project.
2121

2222
2. Open the `SpreadsheetController.cs` file in your web service project.
2323

@@ -39,7 +39,7 @@ using Azure.Storage.Blobs.Specialized;
3939

4040
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.
4141

42-
```Csharp
42+
```csharp
4343

4444
private readonly string _storageConnectionString;
4545
private readonly string _storageContainerName;
@@ -55,7 +55,7 @@ public SpreadsheetController(IConfiguration configuration)
5555

5656
5. Create the `OpenFromAzure()` method to open the document from the Azure Blob Storage.
5757

58-
```Csharp
58+
```csharp
5959

6060
[HttpPost]
6161
[Route("OpenFromAzure")]
@@ -107,7 +107,7 @@ public class FileOptions
107107

108108
6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration.
109109

110-
```Json
110+
```json
111111

112112
{
113113
"Logging": {
@@ -126,7 +126,7 @@ N> Note: Install the Azure.Storage.Blobs NuGet package in the service project.
126126

127127
**Step 3:** Modify the index File in the Spreadsheet sample to make a fetch call to the server to retrieve and load the Excel file from the Google Cloud Storage into the client-side spreadsheet.
128128

129-
```typescript
129+
```ts
130130

131131
<button class="e-btn" onClick={openFromAzure}>
132132
Import XLS file from Azure Blob Storage

Document-Processing/Excel/Spreadsheet/React/Open-Excel-Files/google-cloud-storage.md renamed to Document-Processing/Excel/Spreadsheet/React/Open-Excel-File/from-google-cloud-storage.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ To load a file from Google Cloud Storage in a Spreadsheet Component, you can fol
1313

1414
**Step 1:** Create a Simple Spreadsheet Sample in React
1515

16-
Start by following the steps provided in this [link](../../React//getting-started.md) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
16+
Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
1717

1818
**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project
1919

20-
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../../Spreadsheet/React/open-save.md) for instructions on how to create a web service project.
20+
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project.
2121

2222
2. Open the `SpreadsheetController.cs` file in your web service project.
2323

Document-Processing/Excel/Spreadsheet/React/Save-Excel-Files/aws-s3-bucket.md renamed to Document-Processing/Excel/Spreadsheet/React/Save-Excel-File/to-aws-s3-bucket.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ To save a file to the AWS S3, you can follow the steps below
1313

1414
**Step 1:** Create a Simple Spreadsheet Sample in React
1515

16-
Start by following the steps provided in this [link](../../React//getting-started.md) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
16+
Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
1717

1818
**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project
1919

20-
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../../Spreadsheet/React/open-save.md) for instructions on how to create a web service project.
20+
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project.
2121

2222
2. Open the `SpreadsheetController.cs` file in your web service project.
2323

Document-Processing/Excel/Spreadsheet/React/Save-Excel-Files/azure-blob-storage.md renamed to Document-Processing/Excel/Spreadsheet/React/Save-Excel-File/to-azure-blob-storage.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ control: Save file to Azure Blob Storage
77
documentation: ug
88
---
99

10-
# Save file to Google Cloud Storage
10+
# Save file to Azure Cloud Storage
1111

1212
To save a file to Azure Blob Storage in a Spreadsheet Component, you can follow the steps below
1313

1414
**Step 1:** Create a Simple Spreadsheet Sample in React
1515

16-
Start by following the steps provided in this [link](../../React//getting-started.md) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
16+
Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
1717

1818
**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project
1919

20-
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../../Spreadsheet/React/open-save.md) for instructions on how to create a web service project.
20+
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project.
2121

2222
2. Open the `SpreadsheetController.cs` file in your web service project.
2323

Document-Processing/Excel/Spreadsheet/React/Save-Excel-Files/google-cloud-storage.md renamed to Document-Processing/Excel/Spreadsheet/React/Save-Excel-File/to-google-cloud-storage.md

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ To save a file to Google Cloud Storage in a Spreadsheet Component, you can follo
1313

1414
**Step 1:** Create a Simple Spreadsheet Sample in React
1515

16-
Start by following the steps provided in this [link](../../React//getting-started.md) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
16+
Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started) to create a simple Spreadsheet sample in React. This will give you a basic setup of the Spreadsheet component.
1717

1818
**Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project
1919

20-
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../../Spreadsheet/React/open-save.md) for instructions on how to create a web service project.
20+
1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services) for instructions on how to create a web service project.
2121

2222
2. Open the `SpreadsheetController.cs` file in your web service project.
2323

@@ -33,8 +33,7 @@ using Syncfusion.EJ2.Spreadsheet;
3333

3434
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.
3535

36-
```Csharp
37-
36+
```csharp
3837
private readonly string _bucketName;
3938
private readonly StorageClient _storageClient;
4039

@@ -50,13 +49,11 @@ public SpreadsheetController(IConfiguration configuration)
5049
// Bucket that stores the Excel files
5150
_bucketName = configuration.GetValue<string>("BucketName");
5251
}
53-
5452
```
5553

5654
5. Create the `SaveToGoogleCloud()` method to save the document to the Google Cloud storage.
5755

58-
```Csharp
59-
56+
```csharp
6057
[HttpPost]
6158
[Route("SaveToGoogleCloud")]
6259
public async Task<IActionResult> SaveToGoogleCloud([FromForm] SaveSettings saveSettings)
@@ -80,17 +77,14 @@ public async Task<IActionResult> SaveToGoogleCloud([FromForm] SaveSettings saveS
8077
return BadRequest("Error saving file to Google Cloud Storage: " + ex.Message);
8178
}
8279
}
83-
8480
```
8581

8682
**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
8783

88-
```csharp
89-
84+
```js
9085
<button class="e-btn" onClick={saveToGoogleCloud}>
9186
Save to Google Cloud Storage
9287
</button>
93-
9488
const saveToGoogleCloud = () => {
9589
spreadsheet.saveAsJson().then(json => {
9690
const formData = new FormData();
@@ -115,7 +109,6 @@ const saveToGoogleCloud = () => {
115109
.catch(err => window.alert('Error saving to server: ' + err));
116110
});
117111
};
118-
119112
```
120113

121114
N> Note: The back-end requires the Google.Cloud.Storage.V1 NuGet package and a service-account key that has Storage Object Admin (or equivalent) permissions on the target bucket.

Document-Processing/Excel/Spreadsheet/React/Server-Deployment/how-to-deploy-spreadsheet-server-to-azure-app-service-using-azure-cli.md renamed to Document-Processing/Excel/Spreadsheet/React/Server-Deployment/deploy-spreadsheet-docker-to-azure-using-azure-cli.md

File renamed without changes.

Document-Processing/Excel/Spreadsheet/React/Server-Deployment/how-to-deploy-spreadsheet-server-to-azure-app-service-using-visual-studio.md renamed to Document-Processing/Excel/Spreadsheet/React/Server-Deployment/publish-spreadsheet-server-to-azure-using-visual-studio.md

File renamed without changes.

Document-Processing/Excel/Spreadsheet/React/Server-Deployment/docker-deployment.md renamed to Document-Processing/Excel/Spreadsheet/React/Server-Deployment/spreadsheet-server-docker-image-overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ control: Docker deployment
77
documentation: ug
88
---
99

10-
# Docker Image Overview in React Spreadsheet component
10+
# Spreadsheet server docker image overview in React Spreadsheet
1111

1212
The [**Syncfusion<sup style="font-size:70%">&reg;</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.
1313

0 commit comments

Comments
 (0)