web-dev-qa-db-ja.com

angular2でFilesaver jsを使用する

私は、Filesaver JSとAngularの使用について見つけることができるすべての投稿をチェックしましたが、それでもまだ、頭の周りを包囲することができませんでした。これを私のsystem.config.jsのマップセクションに追加しました

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

これをsystem.config.jsのパッケージセクションに追加しました

  'filesaver': {defaultExtension: 'js'}

次に、この方法でservice.tsにインポートしました

import { saveAs } from 'filesaver';

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

enter image description here

誰かが助けてくれますか？

angulardownloadsave-asfilesaver.js
6
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')
  }
}

それが役に立てば幸い。

9
dipole

httpを使用したangular-cliの場合（その後にhttpClientが続く）：

npm install file-saver --save

このサードパーティのlibを.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()));
    }

最後にコンポーネントをintします：

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

私は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');
      });
1
Nitin Jadhav