我已经检查了所有可以找到使用Filesaver JS with angular的帖子,但我仍然无法绕过一个灵魂。 我将其添加到system.config.js的地图部分
'filesaver': 'node_modules/filesaver/src/Filesaver.js'
我将它添加到system.config.js的包部分
'filesaver': {defaultExtension: 'js'}
然后我以这种方式将其导入我的服务中
import { saveAs } from 'filesaver';
然而我得到了这个错误。
有人可以帮忙吗?
答案 0 :(得分:11)
对于带有http(后跟httpClient)的angular-cli:
npm install file-saver --save
将此第三方库添加到.angular-cli.json
"scripts": [
"../node_modules/file-saver/FileSaver.js"
],
在blabla服务中:
downloadBlaBlasCSV() {
let options = {responseType: ResponseContentType.ArrayBuffer };
return this.http.get(this.config.apiUrl + '/blablasCSV', options)
.catch((err: Response) => Observable.throw(err.json()));
}
最后在组件中:
import { saveAs } from 'file-saver';
downloadBlaBlasCSV() {
this.blablaService.downloadBlaBlasCSV().subscribe(
(data) => { this.openFileForDownload(data); },
(error: any) => {
...
});
}
openFileForDownload(data: Response) {
//var blob = new Blob([data._body], { type: 'text/csv;charset=utf-8' });
//saveAs(blob, 'Some.csv');
let content_type = data.headers.get('Content-type');
let x_filename = data.headers.get('x-filename');
saveAs(data.blob(), x_filename);
}
<强> HttpClient的强>
与http相同,但服务方法不同:
downloadBlaBlasCSV() {
return this.httpClient.get(this.config.apiUrl + '/blablasCSV', {
headers: new HttpHeaders().set('Accept', 'text/csv' ),
observe: 'response',
responseType: 'blob'
})
}
答案 1 :(得分:8)
尝试以下
npm install file-saver --save
然后在项目中添加一个声明文件,例如&#39; declarations.d.ts&#39;并把它放在
declare module 'file-saver';
在systemjs.config.js中,将以下内容添加到地图部分
'file-saver': 'npm:file-saver/FileSaver.js'
然后在您的组件或服务中导入库,如下所示
import { Component } from '@angular/core';
import * as saveAs from 'file-saver';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>
<button (click)="SaveDemo()">Save File</button>`,
})
export class AppComponent {
name = 'Angular';
SaveDemo() {
let file = new Blob(['hello world'], { type: 'text/csv;charset=utf-8' });
saveAs(file, 'helloworld.csv')
}
}
希望它有所帮助。
答案 2 :(得分:1)
我正在使用angular 6(我的项目中没有systemjs.config.js文件)+ FileSaver。我需要从服务器下载PDF。这是有效的方法:
npm install file-saver --save
package.json:
"file-saver": "^1.3.8"
代码:
import { saveAs } from 'file-saver';
...
this.http
.get<any>("/pdfs/mypdf.pdf", { responseType: 'blob' as 'json' })
.pipe(
tap(deployments => this.log(`fetched resoure`)),
catchError(this.handleError('getResource', []))
)
.subscribe(data => {
console.log(data);
saveAs(new Blob([data], { type: 'pdf' }), 'data.pdf');
});