Saltar al contenido

Utilice Filesaver js con angular2

Contamos con la mejor información que hemos encontrado on line. Deseamos que te sirva de ayuda y si quieres aportar algo que nos pueda ayudar a crecer hazlo con libertad.

Solución:

Para angular-cli con http (seguido de httpClient):

npm install file-saver --save

Agregue esta librería de terceros a .angular-cli.json

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

En el servicio de blabla:

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

Finalmente en el componente:

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);
  

httpCliente

Es lo mismo que http pero el método de servicio es diferente:

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

Prueba lo siguiente

npm install file-saver --save

Luego agregue un archivo de declaraciones a su proyecto como ‘declarations.d.ts’ y en él ponga

declare module 'file-saver';

En su systemjs.config.js, agregue lo siguiente a la sección del mapa

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

Y luego importe la biblioteca en su componente o servicio como se muestra a continuación

import  Component  from '@angular/core';
import * as saveAs from 'file-saver';


@Component(
  selector: 'my-app',
  template: `

Hello name

`, ) export class AppComponent name = 'Angular'; SaveDemo() let file = new Blob(['hello world'], type: 'text/csv;charset=utf-8' ); saveAs(file, 'helloworld.csv')

Espero eso ayude.

valoraciones y comentarios

Ten en cuenta difundir esta reseña si si solucionó tu problema.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *