Question

我有这个API终点 http://localhost:59253/api/reports?reporttype=evergreen。如果我在浏览器中复制此URL，它将正确下载excel文件（.xlsx）。现在我试图从我的角度服务中调用这个终点。这是我服务中的代码。

constructor(private http: Http) { }

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

从我的组件中我正在调用这样的服务：

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

在浏览器的网络点击中，我可以看到我正在点击正确的Url，但它似乎无法正常工作。没有错误，它只是什么都不做。知道发生了什么吗？

Answer 1

首先，您需要更改服务代码，如下所示，

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

然后在组件中使用以下代码

    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);
    }

请根据您的content type检查blob是否已正确创建，如果网址未打开新窗口，请检查您是否已导入'rxjs/Rx';

此外，您需要在创建blob对象时检查标题。

如需更多帮助，请与here和here查看相同类型的问题。

希望这会对你有所帮助。

Answer 2

虽然我在这里为Santosh Shinde提供了一个On Up，但如果您想使用标准解决方案，也可以使用FileSaver库。这在多个浏览器中得到支持，并且可以减轻您的负担

Angular 2 Service，如何从Web API下载excel

2 个答案: