如何使用 Angular2 正确下载 excel 文件

Question

这是我的服务代码，它使 post 请求并响应一个 xls 文件：

exportInternalOrder(body) {
        let user_token: string = this.sessionService.getToken();
        let headers = new Headers();
        headers.append('responseType', 'arraybuffer');
        headers.append('Authorization', 'Bearer ' + user_token);
        return this.http.post(this.config.exportInternalOrder, body,{
            headers: headers
        }).map(res => new Blob([res._body],{ type: 'application/vnd.ms-excel' }));
    }

应该处理 excel 文件的响应。这是调用它的代码：

let objToSend = this.makeObjToSend(false);
this.reportingService.exportExcel(objToSend)
    .subscribe(
        data => {
            this.exportData(data);
        },
        error => {
            this.errorFilterMsg.push({ severity: 'error', detail: 'Report exporting has failed!' });
        }
);

这是文件的保存（由于某种原因 window.open 什么都不做）：

exportData(data){       
        let blob = data;
        let a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = 'fileName.xls';
        document.body.appendChild(a);
        a.click();        
    }

但文件仍然保存为损坏的文件。使用 postman 和 curl 时一切正常。任何帮助将不胜感激。

Answer 1

responseType 不应在 headers 中设置，它是 RequestOptionsArgs 对象的一部分，该对象作为第二个参数传递给 post 函数和 RequestOptionsArgs包含 headers、responseType 等，您可以阅读更多相关信息 here。因此，您的代码应如下所示：

import { ResponseContentType } from '@angular/http';

exportInternalOrder(body) {
    let user_token: string = this.sessionService.getToken();
    let headers = new Headers();
    headers.append('Authorization', 'Bearer ' + user_token);
    return this.http.post(this.config.exportInternalOrder, body,{
        headers: headers,
        responseType: ResponseContentType.Blob
    }).map(res => new Blob([res._body],{ type: 'application/vnd.ms-excel' }));
}

Answer 2

我正在写这篇文章..这将对正在寻找 Angular 2 文件下载功能解决方案的其他人有所帮助。下面的一段代码对我有用。

import { ResponseContentType } from '@angular/http';

exportInternalOrder(body) {
    let user_token: string = this.sessionService.getToken();
    let headers = new Headers();
    headers.append('Authorization', 'Bearer ' + user_token);
    return this.http.post(this.config.exportInternalOrder, body,{
        headers: headers,
        responseType: ResponseContentType.Blob}).map(res => new Blob([res.blob()],{ type: 'application/vnd.ms-excel' }));
}

如何使用 Angular2 正确下载 excel 文件

How to properly download excel file with Angular2

excel

angular

content-type

angular2-http