ngx-filesaver

ngx-filesaver

Simple file save with FileSaver.js

示例

• demo
• Stackblitz

安装

npm install file-saver ngx-filesaver --save

添加 FileSaverModule 模块到项目中：

import { FileSaverModule } from 'ngx-filesaver';
@NgModule({
  imports: [ FileSaverModule ]
})

使用方法

支持服务 FileSaverService.save() 或属性指令 fileSaver 两种保存方式。

1、FileSaverService

constructor(private _http: Http, private _FileSaverService: FileSaverService) {
}

onSave() {
  let options = new RequestOptions({
    responseType: ResponseContentType.Blob // 这里必须是Blob类型
  });

  this._http.get('demo.pdf', options).subscribe(res => {
    this._FileSaverService.save((<any>res)._body, fileName);
  });
}

2、fileSaver 属性指令

配置型

<button type="button"
        fileSaver
        [method]="'GET'"
        [fileName]="'中文pdf.pdf'"
        [url]="'assets/files/demo.pdf'"
        [header]="{ token: 'demo' }"
        [query]="{ pi: 1, name: 'demo' }"
        (success)="onSuc($event)"
        (error)="onErr($event)">Download PDF</button>

fileSaver：属性指令名称。 参数说明

参数	说明	类型	默认值
method	请求方法类型	string	GET
url	下路路径	string	-
fileName	文件名	string	-
query	额外的查询参数，等同 params 值	string	-
header	请求的 headers 属性值，一般用来指定 token 之类	any	-
success	下载成功回调	EventEmitter<any>	-
error	下载错误回调	EventEmitter<any>	-

自定义Http型

<button type="button"
        fileSaver
        [http]="onRemote('pdf', true)">Download PDF</button>

onRemote(type: string, fromRemote: boolean): Observable<Response> {
  let options = new RequestOptions({
    responseType: ResponseContentType.Blob
  });
  return this._http.get(`assets/files/demo.${type}`, options).map(response => {
    response.headers.set('filename', `demo.${type}`)
    return response;
  });
}

关于文件名

文件名的获取按以下优先级：fileName =》 response.headers.get('filename') =》 response.headers.get('x-filename')。

如果你请求的是一个CORS跨域地址，需要注意设置 Access-Control-Allow-Headers: filename，以免无法获取。