使用Filesaver js与angular2

我已经检查了所有帖子，我可以找到有关使用Filesaver JS角度，但我仍然无法包裹我的头周围一个soution。我将此添加到我的system.config.js的地图部分使用Filesaver js与angular2

'filesaver': 'node_modules/filesaver/src/Filesaver.js'

我已将此添加到system.config.js的包款

'filesaver': {defaultExtension: 'js'}

我再导入它在我的服务.ts这种方式

import { saveAs } from 'filesaver';

但我得到这个错误。

有人可以帮助吗？

来源

2016-11-24 mayowa ogundele

请尝试以下

npm install file-saver --save

然后添加一个文件，声明你的项目，如 'declarations.d.ts' 和它把

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') 
    } 
}

希望它有帮助。（随后的HttpClient）

来源

2016-11-25 07:48:22 dipole

由于它的工作。我首先导入了错误的库 –

@dipole：从文件保护程序github页面，它告诉我们一种安装typescript定义'npm install @ types/file-saver --save-dev'的方法。如上所述，我还需要添加声明文件吗？在我的项目根文件夹中，我有一个应用程序文件夹和其他文件，如systemjs.config.js文件。如果需要，我应该在哪里添加它？在应用程序文件夹内还是在项目根文件夹下？ –

@ Ng2-Fun我无法使它与打字稿定义一起工作，这就是为什么我去了声明文件的路线。我一直得到“TypeError：file_saver_1.saveAs不是函数”。您可以将声明文件放在项目根文件夹中。 – dipole

对于角度-CLI以http：

npm install file-saver --save

添加该第三方LIB到.angular-cli.json

"scripts": [ 
     "../node_modules/file-saver/FileSaver.js" 
    ],

在布拉布拉服务：

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' 
     }) 
    }

来源

2017-06-04 09:29:43 makkasi

@DevStar您应该在服务器端添加内容类型到响应。对于python response.headers ['Content-type'] ='text/csv'或对于Java response.setContentType（“text/csv”）___________有些标题不能从服务器发送，而服务器应该明确地揭露他们。在python中_______ response.headers [“x-filename”] =文件名_______ response.headers [“Access-Control-Expose-Headers”] ='x-filename' – makkasi

使用Filesaver js与angular2

回答

相关问题