使用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

回答

相關問題