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)