Articles in this section

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

This Knowledge Base explains how to load the excel file in a Angular Spreadsheet Editor 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:

Open save in EJ2 TypeScript Spreadsheet control | Syncfusion

Looking for the full Angular Spreadsheet Editor component overview, features, pricing, and documentation? Visit the Angular Spreadsheet Editor page.
Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied