Question

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

我从我的GET请求得到一个字节数组作为响应，我将它发送到订阅的下载功能：

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倍！

Answer 1

我遇到了与您相同的问题 - 通过在我的“获取”选项中添加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);
}

Answer 2

没有任何作用。我改变了我的服务器以返回相同的字节数组，并添加：

{{ request()->has('faq') ? request()->get('faq') : '' }}

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

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

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

如果您对如何使用blob做出回答请告诉我：）

Answer 3

您可以使用以下代码：

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

Answer 4

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

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

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

标题，而不是{＆＃39;接受＆＃39;：＆＃39; application / pdf＆＃39;}，使用{＆＃39;接受＆＃39;：＆＃39; application / vnd.openxmlformats- officedocument.spreadsheetml.sheet＆＃39;};
Blob，使用相同的类型创建Blob，新Blob（[fileBlob]，{type：＆＃39; application / vnd.openxmlformats-officedocument.spreadsheetml.sheet＆＃39;}）。

文章正在使用File Saver，但我没有。我在文章中留下了一条评论，其中基本解释了我使用的内容而不是File Saver。

Answer 5

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

numbers.Integral

Answer 6

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

使用blob

6 个答案: