用blob下载角度2的xlsx文件答案

【问题标题】：downloading xlsx file in angular 2 with blob用blob下载角度2的xlsx文件
【发布时间】：2017-04-21 04:28:34
【问题描述】：

我想使用 rest api 从 angular 2 的客户端下载 xlsx 文件。

我从我的 GET 请求中得到一个字节数组作为响应，我将它发送到带有 subscribe 的下载函数：

let options = new RequestOptions({ search: params });
this.http.get(this.restUrl, options)
          .subscribe(this.download);

使用blob的下载功能：

download(res: Response) {
let data = new Blob([res.arrayBuffer()], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });
FileSaver.saveAs(data, this.fileName);};

我的问题是我的文件一直损坏。我尝试了很多版本，但没有任何效果。

** 也尝试了这个解决方案，但它不起作用（xlsx 文件仍然损坏） - Angular 2 downloading a file: corrupt result，区别在于我的数据是数组Buffer而不是string或者json，PDF和xlsx是有区别的。

10 倍！

【问题讨论】：

Angular 2 downloading a file的可能重复
这对我有用：stackoverflow.com/questions/41771041/…

标签： angular typescript blob

【解决方案1】：

我遇到了和你一样的问题 - 通过在我的 Get 选项中添加 responseType: ResponseContentType.Blob 来解决它。检查下面的代码：

public getReport(filters: ReportOptions) {
    return this.http.get(this.url, {
            headers: this.headers,
            params: filters,
            responseType: ResponseContentType.Blob
        })
        .toPromise()
        .then(response => this.saveAsBlob(response))
        .catch(error => this.handleError(error));
}

saveAsBlob() 只是 FileSaver.SaveAs() 的一个包装器：

private saveAsBlob(data: any) {
    const blob = new Blob([data._body],
        { type: 'application/vnd.ms-excel' });
    const file = new File([blob], 'report.xlsx',
        { type: 'application/vnd.ms-excel' });

    FileSaver.saveAs(file);
}

【讨论】：

有效！我的问题缺少的关键部分是设置responseType: 'blob'（使用axios），甚至不需要const file = ...。刚做了一个blob 然后做了FileSaver.saveAs(blob, 'report.xlsx')
嗨，这也适用于我，但我有更改 responseType: 'blob'，这适用于我的两个文件 .csv 和 .xlsx 类型的文件。请找到我的代码....return this.http.get(url, { headers: headers, responseType: 'blob', observe: 'response' });

【解决方案2】：

在没有任何效果之后。我更改了我的服务器以返回相同的字节数组，并添加了：

    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    response.setHeader("Content-Disposition", "attachment; filename=deployment-definitions.xlsx");

在我的客户端，我删除了下载功能，而不是 GET 部分：

window.open(this.restUrl, "_blank");

这是我发现可以保存未损坏的 xlsx 文件的唯一方法。

如果你有关于如何使用 blob 的答案，请告诉我 :)

【讨论】：

这就是我最终不得不做的事情。我尝试使用从 blob 创建的 url，但浏览器无法弄清楚如何打开文件。我尝试了这篇文章中的所有方法以及许多其他方法。 stackoverflow.com/questions/35138424/…您提供的解决方案效果很好。谢谢！！！
向你致敬，你拯救了我的一天@reut
使用上述方法如何将数据从客户端传递到服务器以下载特定数据。你能帮忙吗

【解决方案3】：

您可以使用以下代码：

var file = new Blob([data], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
});
saveAs(file,"nameFile"+".xlsx");
deferred.resolve(data);

【讨论】：

是的，它有效，但我还需要添加它，才能工作let headers = new HttpHeaders();headers = headers.append('Accept', '*/*; charset=utf-8');return this.http.get('/api/v1/file/stores/download' , {headers: headers,observe: 'response',params: paramsRef,responseType: 'blob'});

【解决方案4】：

以下解决方案适用于 Google Chrome 版本 58.0.3029.110（64 位）。

这是一篇解释如何使用 Blob 下载 pdf 的文章： https://brmorris.blogspot.ie/2017/02/download-pdf-in-angular-2.html

xlsx 文件的原理相同。只需按照文章中的步骤更改两件事：

标题，而不是 {'Accept': 'application/pdf'}，使用 {'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'};
Blob，使用相同的类型创建 Blob，new Blob([fileBlob], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})。

这篇文章正在使用文件保护程序，但我没有。我在文章中留下了评论，基本解释了我使用什么而不是 File Saver。

【讨论】：

【解决方案5】：

这里是支持 IE 和 chrome/safari 浏览器的解决方案。这里的“响应”对象是从服务接收到的响应。我有这个存档。您可以根据从服务收到的响应更改类型。

    let blob = new Blob([response], {type: 'application/zip'});
    let fileUrl = window.URL.createObjectURL(blob);
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileUrl.split(':')[1] + '.zip');
    } else {
        this.reportDownloadName = fileUrl;
        window.open(fileUrl);
    }

【讨论】：

【解决方案6】：

对我来说问题是，我的 responseType 是“文本”。相反，我需要使用“blob”；它适用于 Angular 7.2.15。

【讨论】：