Loading excel file sitting on server

[Umair Ahmed]

Hi,

Please provide sample / documentation to load an excel file sitting on server.

Thanks

[Madhan Venkateshan]

Hi Umair, 

 

Good day to you. 

 

We would like to suggest that you can open an excel file from the server using open method of spreadsheet control after http request. We have prepared a sample based on your requirement, please refer the below sample link and code snippet. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/149604/ze/Spreadsheet-Open-Save-in-server-467795705 

 

App.component.ts 

loadExcel(args: Event) { 

    let request: XMLHttpRequest = new XMLHttpRequest(); 

    request.responseType = "blob"; 

    request.onload = () => { 

      let file: File = new File([request.response], (args.target as HTMLSelectElement).value + ".xlsx"); 

      this.spreadsheetObj.open({ file: file as any }); 

    } 

    request.open("GET", "http://localhost:53142/Files/" + (args.target as HTMLSelectElement).value + ".xlsx"); 

    request.send(); 

  } 

 

 

Regards, 

Madhan V 

[Umair Ahmed]

Thanks Madhan, that worked.

[Madhan Venkateshan]

Hi Umair, 

 

Thank you for your update, Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Madhan V 

[Umair Ahmed]

Hi,

Can you please let me know what event is fired when its done loading the excel file, I found "loadComple" and "openComplete" but none of these seems to be firing, please advise.

Thanks.

[Arunkumar Devendiran]

Hi Umair, 

 

Sorry for the inconvenience caused. 

 

We can reproduce the reported issue at our end and this is already known issue in our end. We will include the fix for this issue in our next patch release. We suggest you use our Volume 4 main release version (17.4.39) and this issue is not replicated in this version (17.4.39). We have created the sample for your reported query (17.4.39) in that we have using openComplete event. This event triggered on when data is loaded on spreadsheet, in this way you can achieve your requirement. Please refer the below sample and our documentation link. 

 

Sample Link: 

https://www.syncfusion.com/downloads/support/forum/149604/ze/my-app1724447150 

 

Api Link: 

https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/ 

 

Could you please check the above sample and let us know whether this is fulfilling your requirement, if not please share us more information regarding this. So, that we can analyze based on that and provide you a better solution. The information provided would be great help for us to proceed further. 

 

Regards, 

Arunkumar D 

[Saranya Dhayalan]

Hi Umair, 

  

Good day to you. 

  

We are glad to announce that our weekly patch release (17.4.41) is rolled out. We would like to inform that we have included the openComplete event in our latest version (17.4.41). We have created the sample for your reported query in that version (17.4.41). Please refer the below sample link. 

  

Sample link: 

https://stackblitz.com/edit/angular-zxxuap-ylpcj1?file=app.component.html 

  

Please get back to us if you need further assistance. 

  

Regards, 

Saranya D 

[Arno]

I get error of undefined.

loadExcel(args: Event) {

    let request: XMLHttpRequest = new XMLHttpRequest();

    request.responseType = "blob";

    request.onload = () => {

      let file: File = new File([request.response], (args.target as HTMLSelectElement).value + ".xlsx");      

      this.spreadsheetObj.open({ file: file as any });

    }

    request.open("GET", "http://localhost:53142/Files/" + (args.target as HTMLSelectElement).value + ".xlsx");

    request.send();

  }

"this.spreadsheetObj.open({ file: file as any });" Open of undefined.

Any ideas why this would be?

[Sangeetha Priya Murugan]

Hi Arno, 

 

Thank you for your update. 

 

We have checked your reported issue and we would like to let you know that the spreadsheet instance not getting properly based on your provided code. So, we suggest you to get the instance properly while calling the open method. For your convenience, we have prepared the sample based on your requirement, please find link below. 

 

  @ViewChild("default") 

  public spreadsheetObj: SpreadsheetComponent; 

  

created() { 

    fetch( 

      "https://js.syncfusion.com/demos/ejservices/data/Spreadsheet/LargeData.xlsx" 

    ).then(response => { 

      response.blob().then(fileBlob => { 

        var file = new File([fileBlob], "Sample.xlsx"); 

        this.spreadsheetObj.open({ file: file }); // To open the excel file 

      }); 

    }); 

  } 

 

Sample Link: https://stackblitz.com/edit/angular-yzmmhu?file=app.component.ts 

 

KB Link: https://www.syncfusion.com/kb/11955/how-to-import-an-external-url-excel-file-while-initial-load-the-spreadsheet-component 

 

Could you please check the above links and get back to us, if you need any further assistance on this. 

 

Regards, 

Sangeetha M