从 Angular2 服务下载文件不起作用。

Question

我在创建 Angular2 服务以从服务器下载文件时遇到问题。我有 table，其中每条记录都存在一个文件。点击某条记录，调用下载方法：

download(r: FileObject) {
    this.repositoryService.download(r).then((result) => {
        let blob = new Blob([result.blob()], { type: result.headers.get('content-type') });
        let url = window.URL.createObjectURL(blob);
        window.open(url);
    });
}

其中 FileObject 当前文件可供下载。

在我的 RepositoryService 中我写道：

download(data: FileObject) {
    let options: RequestOptions = this.getParams(data.name);
    return this.http.get(`/repository/file`, options)
        .toPromise()
        .then((response) => {
            this.authService.refreshSession();
            return response;
        })
        .catch(this.handleError);
}

getParams 是一种将文件名作为参数传递给 URL:

的简单方法

private getParams(filePath: string): RequestOptions {
    let params: URLSearchParams = new URLSearchParams();
    params.set('filePath', filePath);
    let requestOptions = new RequestOptions({responseType: ResponseContentType.Blob});
    requestOptions.params = params;
    return requestOptions;
}

我记录了所有方法，当我尝试下载文件时，我看到文件已正确返回响应，但它没有保存。

当我尝试下载 jpg 文件时，屏幕刷新并且没有保存任何内容。当我尝试下载 xml 文件时，没有扩展名的奇怪文件正在保存：

任何人都可以帮助我并告诉我我做错了什么？

Answer 1

好的，file-saver library帮助了我。

要在 angular-cli 项目中安装 file-saver library，您必须添加所需的依赖项：

npm install -save file-saver
npm install -save @types/file-saver

在我的代码示例中使用一个库：

在役：

download(data: FileObject): Promise<Blob> {
        let options: RequestOptions = this.getParams(data.name);
        return this.http.get(`/repository/file`, options)
            .toPromise()
            .then((response) => {
                this.authService.refreshSession();
                let contentType = {
                    type: response.headers.get('content-type')
                };
                return new Blob([response.blob()], contentType);
            })
            .catch(this.handleError);
    }

和在组件中你必须以这种方式导入FileSaver：

import * as FileSaver from 'file-saver';

并使用FileSaver如下：

download(r: FileObject) {
    this.repositoryService.download(r).then((result) => {
        FileSaver.saveAs(result, r.name);
    });
}

我希望这对某人有所帮助。就我而言，我使用了 angular4。我没有检查低版本

Answer 2

我收到错误类型错误：FileDialog.saveAs 不是一个函数。当我尝试 Jaroslaw K. 解决方案时。我正在使用 Angular 4.4.4

如果我这样做；

// import * as FileSaver from 'file-saver';
let saveAs = require('file-saver');

和

saveAs(result, r.name);

保存到磁盘，但没有出现对话框。

从 Angular2 服务下载文件不起作用。

Downloading files from Angular2 service doesn't work.

blob

angular2-services

angular