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

Question

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

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

好的， 文件存储库对我有所帮助。

要在angular-cli项目中安装文件存储库 ，必须添加所需的依赖项：

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

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

如果我这样做；

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

和

saveAs(result, r.name);

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