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 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:
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/