Filesaver js with angular2

Question

私はFilesaver JSを角度で使って見つけることができるすべての投稿をチェックしましたが、私はまだ頭の中で自分の頭を包むことができませんでした。 私は、私はその後、私のサービスでそれをインポートsystem.config.jsのパッケージセクション

'filesaver': {defaultExtension: 'js'} 

にこれを追加私のsystem.config.jsのマップセクション

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

にこれを追加.tsこの方法で

import { saveAs } from 'filesaver'; 

このエラーが発生します。

誰かが助けてくださいことはできますか？

Answer 1

次に 'declarations.d.ts' のようなプロジェクトに宣言ファイルを追加し、その中にあなたのsystemjs.config.jsで

declare module 'file-saver'; 

を入れ、追加次

npm install file-saver --save 

をお試しください地図のセクションに次のように

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

希望します。

Answer 2

httpで角度-CLI（HttpClientを続い）：

npm install file-saver --save 

が.angular-cli.jsonにする

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

をblablaサービスでは、このサードパーティのlibを追加します：

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