Simple file save with FileSaver.js
npm install file-saver ngx-filesaver --save
添加 FileSaverModule
模块到项目中:
import { FileSaverModule } from 'ngx-filesaver';
@NgModule({
imports: [ FileSaverModule ]
})
支持服务 FileSaverService.save()
或属性指令 fileSaver
两种保存方式。
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);
});
}
<button type="button"
fileSaver
[fileName]="'中文pdf.pdf'"
[url]="'assets/files/demo.pdf'"
[header]="{ token: 'demo' }"
[query]="{ pi: 1, name: 'demo' }">Download PDF</button>
fileSaver:属性指令名称。
url:下路路径。
fileName:文件名。【选填】
header:请求的 headers
属性值,一般用来指定 token 之类。【选填】
query:额外的查询参数。【选填】
<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
,以免无法获取。