0

I have this API end-point http://localhost:59253/api/reports?reporttype=evergreen. If I copy this url in the browser it will correctly download the excel file (.xlsx). Now I am trying to call this end-point from my angular service. This is the code in my service. 

constructor(private http: Http) { }

getReport() {
    return this.http.get('http://localhost:59253/api/reports?reporttype=evergreen')
    .map(res => res.totalBytes);
}

And from my component i'm calling the service like this:

submit() {        
    this.reportService.getReport()
        .subscribe(
            () => {
               console.log("success");
        }, err => {
                console.log('error');
            });                                  
}

In the network tap of browser I can see that I'm hitting the correct Url, yet it doesn't seem to work. No error, It just simply does nothing. Any idea what's happening?

Iman
  • 717
  • 15
  • 32
  • You don't have `subscribe` or anything. How do you detect that there's no error? See http://stackoverflow.com/help/mcve . – Estus Flask Dec 15 '17 at 02:03
  • I am calling this service from my component. There I am subscribing. – Iman Dec 15 '17 at 02:05
  • Did you read the link above? Please, provide all relevant code and explain *How do you detect that there's no error?*. Otherwise the question cannot get a quality answer and is considered off-topic. – Estus Flask Dec 15 '17 at 02:23
  • I added the calling function. I hope this makes it more clear. – Iman Dec 15 '17 at 02:52
  • The thing you're describing could be caused by CORS. It responds normally, yet causes an error. But I don't see anything wrong here. Since there's error callback, it should be called if there's an error, including CORS errors. – Estus Flask Dec 15 '17 at 03:08

2 Answers2

3

First, you need to change your service code as like follows,

getReport() {
    return this.http.get('http://localhost:59253/api/reports?reporttype=evergreen')
    .map(res => res._body);
}

And then use the following code in your component

    submit() {        
        this.reportService.getReport()
            .subscribe(data => this.downloadFile(data)),//console.log(data),
                             error => console.log("Error downloading the file."),
                             () => console.log("success");;                       
    }


     downloadFile(data: Response){
      var contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      var blob = new Blob([data], { type: contentType });
      var url= window.URL.createObjectURL(blob);
      window.open(url);
    }

Please check blob has been created properly or not based on your content type and then if URL doesn't open the new window please check that you have already imported 'rxjs/Rx' or not ;

Also, you need to check your headers at the time of creating blob object.

For more help please check the same type of question to here and here.

Hope this will help you.

Santosh Shinde
  • 6,045
  • 7
  • 44
  • 68
0

While I gave a On Up for Santosh Shinde's answer here, you can also use FileSaver library if you want to use a standard solution. This is supported across multiple browsers and relieves you of

Abhi
  • 1,624
  • 2
  • 16
  • 29