web-dev-qa-db-fra.com

Utilisez Filesaver js avec angular2

j'ai vérifié tous les articles que je peux trouver sur l'utilisation de Filesaver JS avec un angle, mais je ne pouvais toujours pas envelopper ma tête autour d'un soution ... J'ai ajouté ceci à la section map de mon system.config.js

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

J'ai ajouté ceci à la section des packages du fichier system.config.js

  'filesaver': {defaultExtension: 'js'}

Je l'ai ensuite importé dans mon service.ts de cette façon

import { saveAs } from 'filesaver';

Pourtant, je reçois cette erreur.

 enter image description here

Quelqu'un peut aider s'il vous plaît?

angulardownloadsave-asfilesaver.js
5
mayowa ogundele

Essayez ce qui suit

npm install file-saver --save

Ajoutez ensuite un fichier de déclarations à votre projet du type 'declarations.d.ts' et mettez-le dans 

declare module 'file-saver';

Dans votre systemjs.config.js, ajoutez ce qui suit à la section map

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

Et puis importez la bibliothèque dans votre composant ou service comme ci-dessous

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

J'espère que ça aide.

8
dipole

Pour angular-cli avec http (suivi de httpClient): 

npm install file-saver --save

Ajouter cette bibliothèque tierce à .angular-cli.json

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

Dans le service blabla:

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

Enfin dans le composant:

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

C'est la même chose que http mais la méthode du service est différente:

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

J'utilise angular 6 (aucun fichier systemjs.config.js disponible dans mon projet) + FileSaver. Je devais télécharger PDF à partir du serveur. Voici ce qui a fonctionné:

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