-
Notifications
You must be signed in to change notification settings - Fork 14
documentation(EJ2-1025145:): Porting works in Angular spreadsheet component #2785
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
DeiraSF4418
wants to merge
2
commits into
development
Choose a base branch
from
EJ-1025145
base: development
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
Document-Processing/Excel/Spreadsheet/Angular/how-to-overview.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| --- | ||
| layout: post | ||
| title: Overview Section for How‑to Guides in Angular Spreadsheet | Syncfusion | ||
| description: In this section, you can find answers to frequently asked questions and solutions for common scenarios in the Spreadsheet control. | ||
| platform: document-processing | ||
| control: Spreadsheet | ||
| documentation: ug | ||
| --- | ||
|
|
||
| # Angular Spreadsheet – How-to Guides Overview | ||
|
|
||
| Explore practical solutions and tips for working with the Syncfusion Angular Spreadsheet component. The guides below cover a variety of common scenarios, helping you implement, customize, and get the most out of your spreadsheet features. | ||
|
|
||
| ## How-to Articles | ||
|
|
||
| - [How to change active sheet when importing Angular Spreadsheet?](./how-to/change-active-sheet.md) | ||
| - [How to Create a object structure?](./how-to/create-a-object-structure.md) | ||
| - [How to add interactive context menu?](./how-to/identify-the-context-menu-opened.md) | ||
|
|
||
| ## See Also | ||
|
|
||
| - [Getting Started with Angular Spreadsheet](./getting-started) |
176 changes: 176 additions & 0 deletions
176
...ment-Processing/Excel/Spreadsheet/Angular/open-excel-file/from-aws-s3-bucket.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| --- | ||
| layout: post | ||
| title: Opening excel from AWS S3 in Angular Spreadsheet control | Syncfusion | ||
| description: Learn about how to Open an Excel file from AWS S3 in Angular Spreadsheet control of Syncfusion Essential JS 2 and more details. | ||
| platform: document-processing | ||
| control: Open file from AWS S3 | ||
| documentation: ug | ||
| --- | ||
|
|
||
| # Open file from AWS S3 | ||
|
|
||
| To load a file from AWS S3 in a Spreadsheet Component, you can follow the steps below | ||
|
|
||
| **Step 1:** Create a Simple Spreadsheet Sample in Angular | ||
|
|
||
| Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started) to create a simple Spreadsheet sample in Angular. This will give you a basic setup of the Spreadsheet component. | ||
|
|
||
| **Step 2:** Modify the `SpreadsheetController.cs` File in the Web Service Project | ||
|
|
||
| 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. | ||
|
|
||
| 2. Open the `SpreadsheetController.cs` file in your web service project. | ||
|
|
||
| 3. Import the required namespaces at the top of the file: | ||
|
|
||
| ```csharp | ||
|
|
||
| using Amazon; | ||
| using Amazon.Runtime; | ||
| using Amazon.S3; | ||
| using Amazon.S3.Model; | ||
| using Amazon.S3.Transfer; | ||
|
|
||
| ``` | ||
|
|
||
| 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. | ||
|
|
||
| ```csharp | ||
|
|
||
| private IConfiguration _configuration; | ||
| public readonly string _accessKey; | ||
| public readonly string _secretKey; | ||
| public readonly string _bucketName; | ||
|
|
||
| public SpreadsheetController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) | ||
| { | ||
| _hostingEnvironment = hostingEnvironment; | ||
| _cache = cache; | ||
| _configuration = configuration; | ||
| _accessKey = _configuration.GetValue<string>("AccessKey"); | ||
| _secretKey = _configuration.GetValue<string>("SecretKey"); | ||
| _bucketName = _configuration.GetValue<string>("BucketName"); | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| 5. Create the `OpenFromS3()` method to open the document from the AWS S3 bucket. | ||
|
|
||
| ```csharp | ||
|
|
||
| [Route("api/[controller]")] | ||
| [ApiController] | ||
| public class SpreadsheetController : ControllerBase | ||
| { | ||
| [HttpPost] | ||
| [Route("OpenFromS3")] | ||
| public async Task<IActionResult> OpenFromS3([FromBody] FileOptions options) | ||
| { | ||
| try | ||
| { | ||
| //Set AWS region and credentials | ||
| var region = RegionEndpoint.USEast1; | ||
| var config = new AmazonS3Config { RegionEndpoint = region }; | ||
| var credentials = new BasicAWSCredentials("your-access-key", "your-secretkey"); | ||
| //Create an S3 client to interact with AWS | ||
| using (var client = new AmazonS3Client(credentials, config)) | ||
| { | ||
| using (MemoryStream stream = new MemoryStream()) | ||
| { | ||
| //Get the full file name using input from the client | ||
| string bucketName = "your-bucket-name"; | ||
| string fileName = options.FileName + options.Extension; | ||
| //Download the file from S3 into memory | ||
| var response = await client.GetObjectAsync(new GetObjectRequest | ||
| { | ||
| BucketName = bucketName, | ||
| Key = fileName | ||
| }); | ||
| await response.ResponseStream.CopyToAsync(stream); | ||
| stream.Position = 0; // Reset stream position for reading | ||
| //Wrap the stream as a FormFile for processing | ||
| OpenRequest open = new OpenRequest | ||
| { | ||
| File = new FormFile(stream, 0, stream.Length, options.FileName, fileName) | ||
| }; | ||
| //Convert Excel file to JSON using Workbook.Open method. | ||
| var result = Workbook.Open(open); | ||
| //Return the JSON result to the client | ||
| return Content(result, "application/json"); | ||
| } | ||
| } | ||
| } | ||
| catch (Exception ex) | ||
| { | ||
| // Handle any errors and return a message | ||
| Console.WriteLine($"Error: {ex.Message}"); | ||
| return Content("Error occurred while processing the file."); | ||
| } | ||
| } | ||
|
|
||
| // To receive file details from the client. | ||
| public class FileOptions | ||
| { | ||
| public string FileName { get; set; } = string.Empty; | ||
| public string Extension { get; set; } = string.Empty; | ||
| } | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| 6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration. | ||
|
|
||
| ```json | ||
|
|
||
| { | ||
| "Logging": { | ||
| "LogLevel": { | ||
| "Default": "Information", | ||
| "Microsoft.AspNetCore": "Warning" | ||
| } | ||
| }, | ||
| "AllowedHosts": "*", | ||
| "AccessKey": "Your Access Key from AWS S3", | ||
| "SecretKey": "Your Secret Key from AWS S3", | ||
| "BucketName": "Your Bucket name from AWS S3" | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name. | ||
|
|
||
| **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. | ||
|
|
||
| ```ts | ||
|
|
||
| <button class="e-btn" (click)="openFromS3()">Import XLS files from AWS S3 bucket</button> | ||
|
|
||
| // Function to open a spreadsheet file from AWS S3 via an API call | ||
| openFromS3() { | ||
| this.spreadsheetObj.showSpinner(); | ||
| // Make a POST request to the backend API to fetch the file from S3. Replace the URL with your local or hosted endpoint URL. | ||
| fetch('https://localhost:portNumber/api/spreadsheet/OpenFromS3', { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| body: JSON.stringify({ | ||
| FileName: fileInfo.name, // Name of the file to open | ||
| Extension: fileInfo.extension, // File extension | ||
| }), | ||
| }) | ||
| .then((response) => response.json()) // Parse the response as JSON | ||
| .then((data) => { | ||
| this.spreadsheetObj.hideSpinner(); | ||
| // Load the spreadsheet data into the UI. | ||
| this.spreadsheetObj.openFromJson({ file: data, triggerEvent: true }); | ||
| }) | ||
| .catch((error) => { | ||
| // Log any errors that occur during the fetch operation | ||
| window.alert('Error importing file:', error); | ||
| }); | ||
| }; | ||
|
|
||
| ``` | ||
|
|
||
| N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add the references in TOC file for the newly added topics and modified one.