Articles in this section
Category / Section

How to load the excel file in spreadsheet using gRPC web service in Angular application?

1 min read

This Knowledge Base explains how to load the excel file in a Angular Spreadsheet using the Google Remote Procedure Call (gRPC) web service in the Angular application. Use the openFromJson client-side method to achieve this requirement. If you open the Excel in the spreadsheet, you need to send a file name from a client to a server through the dropdown list select event.

 

[HTML]

 

  <div>
    <h2>Select File to Load</h2>
    <ejs-dropdownlist [dataSource]="dataSource" width="100px" style="display: inline-block;" (select)='onChange($event)' [placeholder]='waterMark'></ejs-dropdownlist>
    {{response}}
</div>
<ejs-spreadsheet #spreadsheet></ejs-spreadsheet>

 

[TS]

 

export class AppComponent {
  response: string;
  title = 'viewer';
  // File names list.
  dataSource = ["File A", "File B", "File C"];
  // Set the placeholder to the DropDownList input element.
  public waterMark: string = 'Select a file';
  @ViewChild("spreadsheet")
  public spreadsheetObj: SpreadsheetComponent
  public onChange(args: any): void {
    const client = new GreeterClient('https://localhost:5001');
    const req = new HelloRequest();
    req.setName(args.itemData.text);
    client.sayHello(req, (err: ServiceError, response: HelloReply) => {
      if (err) {
        this.response = `Error: {err.message}`;
        return;
      }
      // Update the spreadsheet server library returned JSON in a viewer.
      this.spreadsheetObj.openFromJson({ file: response.getMessage() });
    });
}
  
}

 

[Controller]

 

using Grpc.Core;
using Microsoft.Extensions.Logging;
using Syncfusion.EJ2.Spreadsheet;
using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
 
namespace GrpcService
{
    public class GreeterService : Greeter.GreeterBase
    {
        private readonly ILogger<GreeterService> _logger;
        public GreeterService(ILogger<GreeterService> logger)
        {
            _logger = logger;
        }
 
        public override Task<HelloReply> SayHello(HelloRequest request, ServerCallContext context)
        {            
            // Read the file stream using the file name.
            string directoryPath = Path.GetFullPath("Files//" + request.Name + ".xlsx");
            FileStream fileStream = new FileStream(directoryPath, FileMode.Open);
            IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", request.Name + ".xlsx");
 
            // Create an open request based on the file stream.
            OpenRequest openRequest = new OpenRequest();
            openRequest.File = formFile;
 
            // Return the spreadsheet server library returned JSON.
            return Task.FromResult(new HelloReply
            {
                Message = Workbook.Open(openRequest)
            });
        }
    }
}

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/viewer1005341257

 

Service Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GrpcService-1902122789

 

Screenshot:

Graphical user interface, application, table, Excel in Angular Spreadsheet

 

Also, please refer to the following link:

https://blog.vitas.nl/using_grpc_web_with_.net_core_and_angular.html

 

 Documentation Link:

 

https://ej2.syncfusion.com/documentation/spreadsheet/open-save/

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied