PDF Blob no muestra contenido, Angular 2

bytearray

Question

Tengo un problema muy similar a este Blob PDF: la ventana emergente no muestra contenido , pero estoy usando Angular 2. La respuesta a la pregunta fue establecer responseType en arrayBuffer, pero no funciona en Angular 2, el error es que reponseType no funciona existen en el tipo RequestOptionsArgs. También intenté extenderlo con 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 intenté guardar el método SaveAs de FileSaver.js, pero es el mismo problema, se abre pdf, pero el contenido no se muestra. Gracias

Answer 1

Amit, puede cambiar el nombre del nombre de archivo agregando una variable al final de la cadena para 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.

Answer 2

Tuve muchos problemas con la descarga y la visualización del contenido de PDF, probablemente perdí uno o dos días para solucionarlo, así que publicaré un ejemplo práctico de cómo descargar con éxito PDF o abrirlo en una nueva pestaña:

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 está extendiendo 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 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 .

Answer 3

ANGULAR 5

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

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

Para mí, aunque si menciono como responseType: ''arraybuffer'', no pude tomarlo.

Para eso debe mencionar como responseType: ''arraybuffer'' como ''json''. ( Reference )

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 siguiente enlace

Reference