De hecho, esta función aún no está implementada en el soporte de HTTP.

Como solución alternativa, debe extender la clase BrowserXhr de Angular2 como se describe a continuación para establecer el tipo de responseType en blob en el objeto xhr subyacente:

 import {Injectable} from 'angular2/core'; import {BrowserXhr} from 'angular2/http'; @Injectable() export class CustomBrowserXhr extends BrowserXhr { constructor() {} build(): any { let xhr = super.build(); xhr.responseType = "blob"; return <any>(xhr); } }

Luego, debe envolver la carga de respuesta en un objeto Blob y usar la biblioteca FileSaver para abrir el cuadro de diálogo de descarga:

 downloadFile() { this.http.get( 'https://mapapi.apispark.net/v1/images/Granizo.pdf').subscribe( (response) => { var mediaType = 'application/pdf'; var blob = new Blob([response._body], {type: mediaType}); var filename = 'test.pdf'; saveAs(blob, filename); }); }

La biblioteca FileSaver debe incluirse en su archivo HTML:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

Vea este plunkr: http://plnkr.co/edit/tfpS9k2YOO1bMgXBky5Y?p=preview

Desafortunadamente, esto establecerá el tipo de responseType para todas las solicitudes de AJAX. Para poder establecer el valor de esta propiedad, hay más actualizaciones que hacer en las clases XHRConnection y Http .

Como referencias ver estos enlaces:

• Descargar archivo pdf usando jquery ajax
• Recibir archivo zip, angularJs

Editar

Después de pensar un poco más, creo que podría aprovechar los inyectores jerárquicos y configurar este proveedor solo a nivel del componente que ejecuta la descarga:

 @Component({ selector: 'download', template: '<div (click)="downloadFile() ">Download</div>' , providers: [ provide(CustomBrowserXhr, { useClass: CustomBrowserXhr } ] }) export class DownloadComponent { @Input() filename:string; constructor(private http:Http) { } downloadFile() { this.http.get( 'https://mapapi.apispark.net/v1/images/'+this.filename).subscribe( (response) => { var mediaType = 'application/pdf'; var blob = new Blob([response._body], {type: mediaType}); var filename = 'test.pdf'; saveAs(blob, filename); }); } }

Esta anulación solo se aplicaría a este componente (no olvide eliminar el suministro correspondiente al iniciar su aplicación). El componente de descarga podría usarse así:

 @Component({ selector: 'somecomponent', template: ` <download filename="'Granizo.pdf'"></download> ` , directives: [ DownloadComponent ] })

Así que así es como me las arreglé para hacerlo funcionar. Mi situación: necesitaba descargar un PDF desde mi terminal API y guardar el resultado como PDF en el navegador.

Para admitir el guardado de archivos en todos los navegadores, utilicé el módulo FileSaver.js .

Creé un componente que toma como parámetro el ID del archivo a descargar. El componente, , se llama así:

 <pdf-downloader no="24234232"></pdf-downloader>

El componente en sí usa XHR para buscar/guardar el archivo con el número dado en el parámetro no . De esta manera podemos eludir el hecho de que el módulo http de Angular2 aún no admite tipos de resultados binarios.

Y ahora, sin más preámbulos, el código del componente:

 import {Component,Input } from 'angular2/core'; import {BrowserXhr} from 'angular2/http'; // Use Filesaver.js to save binary to file // https://github.com/eligrey/FileSaver.js/ let fileSaver = require('filesaver.js'); @Component({ selector: 'pdf-downloader', template: ` <button class="btn btn-secondary-outline btn-sm " (click)="download()"> <span class="fa fa-download" *ngIf="!pending"></span> <span class="fa fa-refresh fa-spin" *ngIf="pending"></span> </button> ` }) export class PdfDownloader { @Input() no: any; public pending:boolean = false; constructor() {} public download() { // Xhr creates new context so we need to create reference to this let self = this; // Status flag used in the template. this.pending = true; // Create the Xhr request object let xhr = new XMLHttpRequest(); let url = `/api/pdf/iticket/${this.no}?lang=en`; xhr.open('GET', url, true); xhr.responseType = 'blob'; // Xhr callback when we get a result back // We are not using arrow function because we need the 'this' context xhr.onreadystatechange = function() { // We use setTimeout to trigger change detection in Zones setTimeout( () => { self.pending = false; }, 0); // If we get an HTTP status OK (200), save the file using fileSaver if(xhr.readyState === 4 && xhr.status === 200) { var blob = new Blob([this.response], {type: 'application/pdf'}); fileSaver.saveAs(blob, 'Report.pdf'); } }; // Start the Ajax request xhr.send(); } }

He usado Font Awesome para las fuentes utilizadas en la plantilla. Quería que el componente mostrara un botón de descarga y una rueda giratoria mientras se recupera el pdf.

Además, tenga en cuenta que podría usar require para obtener el módulo fileSaver.js. Esto se debe a que estoy usando WebPack, por lo que puedo requerir/importar como quiero. Su sintaxis puede ser diferente según su herramienta de compilación.

No creo que todos estos trucos sean necesarios. Acabo de hacer una prueba rápida con el servicio http estándar en angular 2.0 y funcionó como se esperaba.

 /* generic download mechanism */ public download(url: string, data: Object = null): Observable<Response> { //if custom headers are required, add them here let headers = new Headers(); //add search parameters, if any let params = new URLSearchParams(); if (data) { for (let key in data) { params.set(key, data[key]); } } //create an instance of requestOptions let requestOptions = new RequestOptions({ headers: headers, search: params }); //any other requestOptions requestOptions.method = RequestMethod.Get; requestOptions.url = url; requestOptions.responseType = ResponseContentType.Blob; //create a generic request object with the above requestOptions let request = new Request(requestOptions); //get the file return this.http.request(request) .catch(err => { /* handle errors */ }); } /* downloads a csv report file generated on the server based on search criteria specified. Save using fileSaver.js. */ downloadSomethingSpecifc(searchCriteria: SearchCriteria): void { download(this.url, searchCriteria) .subscribe( response => { let file = response.blob(); console.log(file.size + " bytes file downloaded. File type: ", file.type); saveAs(file, 'myCSV_Report.csv'); }, error => { /* handle errors */ } ); }