|
| 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 | +``` |
0 commit comments