PDF Blob não está mostrando conteúdo, Angular 2

Eu tenho problema muito semelhante a este PDF Blob – janela pop-up não mostrando conteúdo , mas eu estou usando Angular 2. A resposta em questão foi para definir responseType para arrayBuffer, mas não funciona em Angular 2, o erro é o reponseType não existem no tipo RequestOptionsArgs. Eu também tentei estendê-lo pelo BrowserXhr, mas ainda não funciona ( https://github.com/angular/http/issues/83 ).

Meu código é:

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

E o 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); } 

Eu também tentei salvar o método de FileSaver.js, mas é o mesmo problema, pdf abre, mas o conteúdo não é exibido. obrigado

Eu tive um monte de problemas com o download e mostrando o conteúdo do PDF, eu provavelmente perdi um dia ou dois para consertá-lo, então vou postar exemplo de como fazer o download do PDF ou abri-lo em uma nova aba:

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

Também vale a pena mencionar que, se você está estendendo a class Http para adicionar headers a todas as suas solicitações ou algo assim, também pode criar problemas para baixar PDF, porque você replaceá RequestOptions , que é onde nós adicionamos responseType: ResponseContentType.Blob e este você obterá The request body isn't either a blob or an array buffer erro de The request body isn't either a blob or an array buffer .

ANGULAR 5

Eu tive o mesmo problema que perdi alguns dias nisso.

Aqui a minha resposta pode ajudar os outros, o que ajudou a tornar o pdf.

Para mim, embora eu mencionei como responseType: ‘arraybuffer’, não foi possível aceitá-lo.

Para isso você precisa mencionar como responseType: ‘arraybuffer’ como ‘json’. ( Reference )

Código de trabalho

 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 no link abaixo

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

Amit, Você pode renomear o nome do arquivo adicionando uma variável ao final da string, então saveAs(res, "myPDF.pdf");

Torna-se

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

em que someVariable pode ser um contador ou uma das minhas favoritas, uma string de data e hora.