Skip to content

Commit 8eeabe3

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
authored
Merge branch 'development' into EJ2-1010807-react-diataxis
2 parents 27eb2ff + 757e215 commit 8eeabe3

56 files changed

Lines changed: 2532 additions & 2292 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Document-Processing-toc.html‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -888,11 +888,18 @@
888888
<li>
889889
<a href="/document-processing/pdf/pdf-viewer/react/overview">React</a>
890890
<ul>
891-
<li>Getting Started
891+
<li>
892+
<a href="/document-processing/pdf/pdf-viewer/react/getting-started-overview">Getting Started</a>
892893
<ul>
893894
<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started">with Standalone PDF Viewer</a></li>
894895
<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
895-
<li><a href="/document-processing/pdf/pdf-viewer/react/preact">Preact</a></li>
896+
</ul>
897+
</li>
898+
<li>
899+
Environment Integration
900+
<ul>
901+
<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/preact">Preact</a></li>
902+
<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/nextjs-getting-started">NextJS</a></li>
896903
</ul>
897904
</li>
898905
<li><a href="/document-processing/pdf/pdf-viewer/react/feature-module">Feature Modules</a></li>
@@ -5201,7 +5208,24 @@
52015208
<li><a href="/document-processing/excel/spreadsheet/react/getting-started">Getting Started</a></li>
52025209
<li><a href="/document-processing/excel/spreadsheet/react/nextjs-getting-started">Getting Started with NextJS</a></li>
52035210
<li><a href="/document-processing/excel/spreadsheet/react/data-binding">Data Binding</a></li>
5204-
<li><a href="/document-processing/excel/spreadsheet/react/open-save">Open and Save</a></li>
5211+
<li><a href="/document-processing/excel/spreadsheet/react/open/open">Open Excel File</a>
5212+
<ul>
5213+
<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/file-uploader">using a file uploader</a></li>
5214+
<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/external-url">using an external URL</a></li>
5215+
<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/blob-data">from blob data</a></li>
5216+
<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/base64-string">from base64 string</a></li>
5217+
<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/server">located on a server</a></li>
5218+
<li><a href="/document-processing/excel/spreadsheet/react/open/open-excel-file/aws-lambda">using AWS Lambda hosted web service</a></li>
5219+
</ul>
5220+
</li>
5221+
<li><a href="/document-processing/excel/spreadsheet/react/save/save">Save Excel File</a>
5222+
<ul>
5223+
<li><a href="/document-processing/excel/spreadsheet/react/save/save-excel-file/blob-data">as blob data</a></li>
5224+
<li><a href="/document-processing/excel/spreadsheet/react/save/save-excel-file/base64-string">as base64 string</a></li>
5225+
<li><a href="/document-processing/excel/spreadsheet/react/save/save-excel-file/server">to a server</a></li>
5226+
<li><a href="/document-processing/excel/spreadsheet/react/save/save-excel-file/aws-lambda">using AWS Lambda hosted web service</a></li>
5227+
</ul>
5228+
</li>
52055229
<li><a href="/document-processing/excel/spreadsheet/react/open-from-cloud">Open From Cloud</a>
52065230
<ul>
52075231
<li><a href="/document-processing/excel/spreadsheet/react/cloud-storage/open-from-cloud/aws-s3-bucket">AWS S3</a></li>
@@ -5228,6 +5252,7 @@
52285252
<li><a href="/document-processing/excel/spreadsheet/react/editing">Editing</a></li>
52295253
<li><a href="/document-processing/excel/spreadsheet/react/context-menu">Context Menu</a></li>
52305254
<li><a href="/document-processing/excel/spreadsheet/react/formulas">Formulas</a></li>
5255+
<li><a href="/document-processing/excel/spreadsheet/react/data-validation">Data Validation</a></li>
52315256
<li><a href="/document-processing/excel/spreadsheet/react/formatting">Formatting</a></li>
52325257
<li><a href="/document-processing/excel/spreadsheet/react/illustrations">Illustrations</a></li>
52335258
<li><a href="/document-processing/excel/spreadsheet/react/rows-and-columns">Rows and Columns</a></li>

‎Document-Processing/Excel/Spreadsheet/React/Open/Open-Excel-File/aws-lambda.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
layout: post
3+
title: Open using Lambda in React Spreadsheet component | Syncfusion
4+
description: Learn here all about opening Excel files using AWS Lambda in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: Open Excel using AWS Lambda
7+
documentation: ug
8+
---
9+
10+
# Open an excel file using a hosted web service in AWS Lambda
11+
12+
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.
13+
14+
[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)
15+
16+
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/react/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.
17+
18+
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/react/documentation/api/spreadsheet/index-default#openfromjson) method to load this JSON data into the spreadsheet component.
19+
20+
The following code example shows how to open an Excel file using a hosted web service in AWS Lambda, as mentioned above.
21+
22+
```js
23+
function Default() {
24+
let spreadsheet;
25+
const beforeOpenHandler = (eventArgs) => {
26+
eventArgs.cancel = true; // To prevent the default open action.
27+
if (eventArgs.file) {
28+
const reader = new FileReader();
29+
reader.readAsDataURL(eventArgs.file);
30+
reader.onload = () => {
31+
// Removing the xlsx file content-type.
32+
const base64Data = reader.result.replace('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,', '');
33+
openExcel({
34+
file: base64Data,
35+
extension: eventArgs.file.name.slice(eventArgs.file.name.lastIndexOf('.') + 1),
36+
password: eventArgs.password || ''
37+
});
38+
};
39+
}
40+
};
41+
const openExcel = (requestData) => {
42+
// Fetch call to AWS server for open processing.
43+
fetch('https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open', {
44+
method: 'POST',
45+
headers: {
46+
'Accept': 'application/json, text/plain',
47+
'Content-Type': 'application/json;charset=UTF-8'
48+
},
49+
body: JSON.stringify(requestData)
50+
}).then((response) => {
51+
if (response.ok) {
52+
return response.json();
53+
}
54+
}).then((data) => {
55+
// Loading the JSON data into our spreadsheet.
56+
if (data.Workbook && data.Workbook.sheets) {
57+
spreadsheet.openFromJson({ file: data });
58+
}
59+
}).catch((error) => {
60+
console.log(error);
61+
});
62+
};
63+
return (<div className='control-pane'>
64+
<div className='control-section spreadsheet-control'>
65+
<SpreadsheetComponent openUrl='https://xxxxxxxxxxxxxxxxxx.amazonaws.com/Prod/api/spreadsheet/open' ref={(ssObj) => { spreadsheet = ssObj; }} beforeOpen={beforeOpenHandler}>
66+
</SpreadsheetComponent>
67+
</div>
68+
</div>);
69+
}
70+
export default Default;
71+
```
72+
73+
```csharp
74+
public IActionResult Open(OpenOptions openOptions)
75+
{
76+
// Convert the base64 string to bytes array.
77+
byte[] bytes = Convert.FromBase64String(openOptions.File);
78+
// Loading the bytes array to stream.
79+
MemoryStream stream = new MemoryStream(bytes);
80+
OpenRequest open = new OpenRequest();
81+
// Converting the stream into FormFile.
82+
open.File = new FormFile(stream, 0, bytes.Length, "Sample", "Sample." + openOptions.Extension);
83+
if (string.IsNullOrEmpty(openOptions.Password))
84+
open.Password = openOptions.Password;
85+
var result = Workbook.Open(open);
86+
return Content(result);
87+
}
88+
89+
public class OpenOptions
90+
{
91+
public string File { get; set; } = string.Empty;
92+
public string Password { get; set; } = string.Empty;
93+
public string Extension { get; set; } = string.Empty;
94+
}
95+
```

‎Document-Processing/Excel/Spreadsheet/React/Open/Open-Excel-File/base64-string.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: post
3+
title: Open from Base64 in React Spreadsheet component | Syncfusion
4+
description: Learn here all about how to Open an excel file from Base64 string data in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: base64
7+
documentation: ug
8+
---
9+
10+
# Open an excel file from Base64 string data
11+
12+
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/react/documentation/api/spreadsheet/index-default#open) method in the spreadsheet.
13+
14+
The following code example shows how to open the spreadsheet data as base64 string.
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="app.jsx" %}
18+
{% include code-snippet/spreadsheet/react/base-64-string/app/app.jsx %}
19+
{% endhighlight %}
20+
{% highlight ts tabtitle="app.tsx" %}
21+
{% include code-snippet/spreadsheet/react/base-64-string/app/app.tsx %}
22+
{% endhighlight %}
23+
{% endtabs %}
24+
25+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/base-64-string" %}

‎Document-Processing/Excel/Spreadsheet/React/Open/Open-Excel-File/blob-data.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: post
3+
title: Open from Blob in React Spreadsheet component | Syncfusion
4+
description: Learn here all about how to Open an excel file from blob data in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: blob data
7+
documentation: ug
8+
---
9+
10+
# Open an excel file from blob data
11+
12+
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 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/react/documentation/api/spreadsheet/index-default#open) method in the Spreadsheet component to load that `File` object.
13+
14+
Please find the code to fetch the blob data and load it into the Spreadsheet component below.
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="app.jsx" %}
18+
{% include code-snippet/spreadsheet/react/open-from-blobdata-cs1/app/app.jsx %}
19+
{% endhighlight %}
20+
{% highlight ts tabtitle="app.tsx" %}
21+
{% include code-snippet/spreadsheet/react/open-from-blobdata-cs1/app/app.tsx %}
22+
{% endhighlight %}
23+
{% endtabs %}
24+
25+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/open-from-blobdata-cs1" %}

‎Document-Processing/Excel/Spreadsheet/React/Open/Open-Excel-File/external-url.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
layout: post
3+
title: Open from URL in React Spreadsheet component | Syncfusion
4+
description: Learn here all about Open an external URL excel file while initial load in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: external url
7+
documentation: ug
8+
---
9+
10+
# Open an external URL excel file while initial load
11+
12+
You can achieve to access the remote Excel file by using the [`created`](https://ej2.syncfusion.com/react/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/react/documentation/api/spreadsheet/index-default#open) this file by using Spreadsheet component open method.
13+
14+
{% tabs %}
15+
{% highlight js tabtitle="app.jsx" %}
16+
{% include code-snippet/spreadsheet/react/open-save-cs2/app/app.jsx %}
17+
{% endhighlight %}
18+
{% highlight ts tabtitle="app.tsx" %}
19+
{% include code-snippet/spreadsheet/react/open-save-cs2/app/app.tsx %}
20+
{% endhighlight %}
21+
{% endtabs %}
22+
23+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/open-save-cs2" %}

‎Document-Processing/Excel/Spreadsheet/React/Open/Open-Excel-File/file-uploader.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: post
3+
title: Open from Uploader in React Spreadsheet component | Syncfusion
4+
description: Learn here all about Open an excel file using a file uploader in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: file uploader
7+
documentation: ug
8+
---
9+
10+
# Open an excel file using a file uploader
11+
12+
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.
13+
14+
The following code example shows how to import an Excel document using file uploader in spreadsheet.
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="app.jsx" %}
18+
{% include code-snippet/spreadsheet/react/open-save-cs9/app/app.jsx %}
19+
{% endhighlight %}
20+
{% highlight ts tabtitle="app.tsx" %}
21+
{% include code-snippet/spreadsheet/react/open-save-cs9/app/app.tsx %}
22+
{% endhighlight %}
23+
{% endtabs %}
24+
25+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/open-save-cs9" %}

‎Document-Processing/Excel/Spreadsheet/React/Open/Open-Excel-File/server.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
layout: post
3+
title: Open from Server in React Spreadsheet component | Syncfusion
4+
description: Learn here all about Open an Excel file located on a server in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: server
7+
documentation: ug
8+
---
9+
10+
# Open an Excel file located on a server
11+
12+
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 side as `JSON data`. On the client side, you should use the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openfromjson) method to load that `JSON data` into the Spreadsheet component.
13+
14+
**Server Endpoint**:
15+
16+
```csharp
17+
public IActionResult Open([FromBody] FileOptions options)
18+
{
19+
OpenRequest open = new OpenRequest();
20+
string filePath = _env.ContentRootPath.ToString() + "\\Files\\" + options.FileName + ".xlsx";
21+
// Getting the file stream from the file path.
22+
FileStream fileStream = new FileStream(filePath, FileMode.Open);
23+
// Converting "MemoryStream" to "IFormFile".
24+
IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx");
25+
open.File = formFile;
26+
// Processing the Excel file and return the workbook JSON.
27+
var result = Workbook.Open(open);
28+
fileStream.Close();
29+
return Content(result);
30+
}
31+
32+
public class FileOptions
33+
{
34+
public string FileName { get; set; } = string.Empty;
35+
}
36+
```
37+
38+
**Client Side**:
39+
40+
```js
41+
42+
// Fetch call to server to load the Excel file.
43+
fetch('https://localhost:{{Your_port_number}}/Home/Open', {
44+
method: 'POST',
45+
headers: {
46+
'Content-Type': 'application/json',
47+
},
48+
body: JSON.stringify({ FileName: 'Sample' }),
49+
})
50+
.then((response) => response.json())
51+
.then((data) => {
52+
// Load the JSON data into spreadsheet.
53+
spreadsheet.openFromJson({ file: data });
54+
})
55+
56+
```
57+
58+
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.
59+
60+
```js
61+
// To open an Excel file from the server.
62+
fetch('https://localhost:{{port_number}}/Home/Open')
63+
```

0 commit comments

Comments
 (0)