Get and Save Spreadsheet data with Angular and ASP.NET Core

Question

Hi Syncfusion Team,I have a project that uses Spreadsheet component (with Angular 11.2.6 and ASP.NET Core 3.1).I have some requirements in my project:- When I open the Spreadsheet component, I call an API to get Spreadsheet data from BE.BE codes.  var fileStream = await DownloadFileFromPath(documentPath.ToString());            return File(fileStream, "application/octet-stream", fileName);FE codes: public getSpreadsheetData(): Observable<Blob> {    return this.http.get(`.../spreadsheet`, { responseType: 'blob' });  }public onCreated() {    if (!this.spreadsheet) {return; }    const blobFile = new Blob([this.data], { type: this.data.type });    const file = new File([blobFile], 'Spreadsheet.xlsx');    this.spreadsheet.open({ file: file });  }In this case, the spreadsheet will automatically call another API to open it. That's means: we will call 2 APIs to open the Spreadsheet. Can we just call 1 API to open the spreadsheet component? (Like in this link: https://www.syncfusion.com/forums/156741/not-able-to-load-excel-file-from-serve-to-spreadsheet)- In the FE side, I have a Close and Submit button. What I want is that: If user edits the spreadsheet but doesn't submit it, we will save that file as a draft. The next time user opens the spreadsheet, the file from the last changes will be opened.- When user clicks the submit button, we want to store the data as a excel file in our storage.Can you give me some example codes (FE and BE) for the WHOLE PROCESS, follow to my requirements ? There are 3 APIs: getData, post to save draft, post to save file.You can follow to this link above, because I think this a good approach, we just need to call 1 API to open the spreadsheet component. Please inform to me if you have any further information.Regards,Nguyen

nguyen hoang phuong · Answer

Hi,I have an other question. If we open the spreadsheet with the openFromJson() method, do we need add the openUrl to the spreadsheet component? If yes, we have to create our own API Open link, not from https://services.syncfusion.com. Is that right

Vasanth Ravi · Answer

Hi Nguyen,Thanks for contacting Syncfusion Support...!As per your requirement we have created a sample with three
button click events. As instructed while clicking on the close button we have
saved the data being present in the spreadsheet as JSON and saved it into a
variable. On clicking the Load Draft button, we then loaded the saved JSON
(draft data) to the spreadsheet component.On the Submit button functionality we have invoked the save
method of spreadsheet to export the file in a desired format. Attached sample
and code block for reference.CODE BLOCK:

public response: any;
  saveDraft(): void {
      // Save the spreadsheet data as JSON.
      this.spreadsheetObj.saveAsJson().then((Json) => (this.response = Json));
  }
  openDraft(): void {
      // Load the JSON data to the spreadsheet.
      this.spreadsheetObj.openFromJson({ file: this.response.jsonObject });
  }
  saveFile(): void {
      // Save the spreadsheet data to an Excel file with the filename and extension you specify.
      this.spreadsheetObj.save({
          url: 'https://services.syncfusion.com/angular/production/api/spreadsheet/save',
          fileName: 'Worksheet',
          saveType: 'Xlsx',
      });
  }

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Invoke Single API:On the created event of the spreadsheet, we directly read stream using XlsIO and use the
‘openFromJson’ method in client side to open the excel file from stream with
single fetch. Attached code block for
reference.CODE BLOCK:

created() {
      fetch(http://localhost:55367/Home/OpenFromServer).then((response) => {
          response.json().then((data) => {
              this.spreadsheetObj.openFromJson({ file: data });
          });
      });
  }

public string OpenFromServer()
  {
      ExcelEngine excelEngine = new ExcelEngine();
      IWorkbook workbook;
      FileStream fs = System.IO.File.Open("./wwwroot/TestFile.xlsx", FileMode.Open); // converting excel file to stream
      workbook = excelEngine.Excel.Workbooks.Open(fs, ExcelOpenType.Automatic); // coverting stream to XlsIO workbook
      MemoryStream outputStream = new MemoryStream();
      workbook.SaveAs(outputStream);
      IFormFile formFile = new FormFile(outputStream, 0, outputStream.Length, "", "TestFile.xlsx"); // converting MemoryStream to IFormFile
      OpenRequest open = new OpenRequest();
      open.File = formFile;
      fs.Close();
      return Workbook.Open(open); // Return Spreadsheet readable data
  }

Below attached are front end sample ( angular ) and back
end service ( core ).FE Angular Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular_sample1050466765
BE Core Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core344892917
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Regarding service link for openFromJson:It is not compulsory to have a service link to load the
data using openFromJson method. The openFromJson method loads the data that is
being constructed as a workbook model which supports in spreadsheet. ( Refer
sample button click functionalities )On a case, that if you need to load the excel file that is
locally present in the server and need to convert it into JSON. You need to
have a fetch URL ( service ) to access the file. At this scenario you can have
your own API open link to perform importing actions.Attached links for reference.https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#saveasjsonhttps://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#savehttps://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#openfromjsonhttps://help.syncfusion.com/file-formats/xlsio/loading-and-saving/loading-and-saving-excel-files-in-asp-net-core-c-sharpKnowledge Base:https://support.syncfusion.com/kb/article/10474/how-to-open-and-save-an-excel-file-to-server-in-spreadsheethttps://support.syncfusion.com/kb/article/10357/how-to-save-and-retrieve-the-javascript-spreadsheet-data-as-json-in-databasehttps://support.syncfusion.com/kb/article/10417/how-to-import-an-external-url-excel-file-while-initial-load-the-spreadsheet-componentGet back to us if you need any other further
clarifications.

nguyen hoang phuong · Answer

Hi,Thanks for the very detail answer. I will work with your suggestion and get back to you if I have any further requirement.Regards,Nguyen

Sangeetha Priya Murugan · Answer

Hi Nguyen,Thanks for your update, take your own time and we will wait to hear from you.