Question

创建Angular2服务从服务器下载文件时遇到问题。我有表，每个记录都呈现单个文件。点击一些名为 download 方法的记录：

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项目中安装文件保护程序库，您必须添加所需的依赖项：

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

我得到ERROR TypeError：FileDialog.saveAs不是函数。当我尝试Jaroslaw K.解决方案。我使用的是Angular 4.4.4

如果我这样做;

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

和

saveAs(result, r.name);

保存到磁盘，但不显示任何对话框。

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

2 个答案: