wake-up-neo.com

Verwenden Sie Filesaver js mit angle2

ich habe alle Beiträge überprüft, die ich zur Verwendung von Filesaver JS mit eckigen Pfeilen finden kann, aber ich konnte meinen Kopf immer noch nicht um eine Soution legen

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

Ich habe dies dem Paketabschnitt der system.config.js hinzugefügt

  'filesaver': {defaultExtension: 'js'}

Ich habe es dann in meine Dienste importiert

import { saveAs } from 'filesaver';

Trotzdem bekomme ich diesen Fehler.

 enter image description here

Kann jemand bitte helfen?

5
mayowa ogundele

Versuche Folgendes

npm install file-saver --save

Dann fügen Sie Ihrem Projekt eine Deklarationsdatei hinzu wie 'declarations.d.ts' und legen Sie sie dort ab 

declare module 'file-saver';

Fügen Sie in Ihrem systemjs.config.js dem Kartenabschnitt Folgendes hinzu

'file-saver': 'npm:file-saver/FileSaver.js'

Und importieren Sie dann die Bibliothek in Ihre Komponente oder in Ihren Dienst wie unten beschrieben

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

Ich hoffe es hilft.

8
dipole

Für eckige Kli mit http (gefolgt von httpClient):

npm install file-saver --save

Fügen Sie diese Drittanbieter-Bibliothek zu .angular-cli.json hinzu

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

Im blabla-Dienst:

downloadBlaBlasCSV() {
        let options = {responseType: ResponseContentType.ArrayBuffer };
        return this.http.get(this.config.apiUrl + '/blablasCSV', options)
        .catch((err: Response) => Observable.throw(err.json()));
    }

Zum Schluss in der Komponente:

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

Es ist dasselbe wie bei http, aber die Servicemethode ist anders:

downloadBlaBlasCSV() {
        return this.httpClient.get(this.config.apiUrl + '/blablasCSV',  {
            headers: new HttpHeaders().set('Accept', 'text/csv' ),
            observe: 'response',
            responseType: 'blob'
        })
    }
11
makkasi

Ich verwende eckige 6 (in meinem Projekt ist keine Datei systemjs.config.js verfügbar) + FileSaver. Ich musste PDF vom Server herunterladen. Folgendes funktionierte:

npm install file-saver --save

package.json:

"file-saver": "^1.3.8"

code:

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