PDF Blob no muestra contenido, Angular 2

Tengo un problema muy similar a este PDF Blob: la ventana emergente no muestra contenido , pero estoy usando Angular 2. La respuesta en la pregunta fue establecer responseType en arrayBuffer, pero no funciona en Angular 2, el error es que el tipo de respuesta no existe en tipo RequestOptionsArgs. También traté de extenderlo por BrowserXhr, pero aún no funciona ( https://github.com/angular/http/issues/83 ).

Mi código es:

createPDF(customerServiceId: string) { console.log("Sending GET on " + this.getPDFUrl + "/" + customerServiceId); this._http.get(this.getPDFUrl + '/' + customerServiceId).subscribe( (data) => { this.handleResponse(data); }); } 

Y el método handleResponse:

 handleResponse(data: any) { console.log("[Receipt service] GET PDF byte array " + JSON.stringify(data)); var file = new Blob([data._body], { type: 'application/pdf' }); var fileURL = URL.createObjectURL(file); window.open(fileURL); } 

También traté de guardar como método de FileSaver.js, pero es el mismo problema, se abre el pdf, pero el contenido no se muestra. Gracias

Tuve muchos problemas para descargar y mostrar contenido de PDF, probablemente desperdicié uno o dos días para solucionarlo, así que publicaré un ejemplo de cómo descargar PDF correctamente o abrirlo en una pestaña nueva:

myService.ts

 downloadPDF(): any { return this._http.get(url, { responseType: ResponseContentType.Blob }).map( (res) => { return new Blob([res.blob()], { type: 'application/pdf' }) } } 

myComponent.ts

 this.myService.downloadPDF().subscribe( (res) => { saveAs(res, "myPDF.pdf"); //if you want to save it - you need file-saver for this : https://www.npmjs.com/package/file-saver var fileURL = URL.createObjectURL(res); window.open(fileURL); / if you want to open it in new tab } ); 

NOTA

También vale la pena mencionar que si extiende la clase Http para agregar headers a todas sus solicitudes o algo así, también puede crear problemas para descargar PDF porque anulará RequestOptions , que es donde agregamos responseType: ResponseContentType.Blob y esto obtendrá The request body isn't either a blob or an array buffer error de The request body isn't either a blob or an array buffer .

ANGULAR 5

Tuve el mismo problema que perdí algunos días en eso.

Aquí mi respuesta puede ayudar a otros, lo que ayudó a generar el pdf.

Para mí, aunque menciono como responseType: ‘arraybuffer’, no pude tomarlo.

Para eso, debe mencionar como responseType: ‘arraybuffer’ como ‘json’. ( Referencia )

Código de trabajo

 downloadPDF(): any { return this._http.get(url, { responseType: 'blob' as 'json' }).subscribe((res) => { var file = new Blob([res], { type: 'application/pdf' }); var fileURL = URL.createObjectURL(file); window.open(fileURL); } } 

Referido desde el enlace a continuación

https://github.com/angular/angular/issues/18586

Amit, puedes cambiar el nombre del archivo agregando una variable al final de la cadena, de modo que saveAs(res, "myPDF.pdf");

Se convierte

 saveAs(res, "myPDF_"+someVariable+".pdf"); 

donde someVariable podría ser un contador o mi favorito personal una cadena de fecha y hora.