PDF Blob没有显示内容，Angular 2

我有问题非常类似于这个PDF Blob – popup窗口没有显示的内容 ，但我使用Angular 2.有问题的答案是设置responseType为arrayBuffer，但它不适用于Angular 2，错误是reponseType不存在于RequestOptionsArgstypes中。 我也试图通过BrowserXhr扩展它，但仍然不工作（ https://github.com/angular/http/issues/83 ）。

我的代码是：

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

和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); } 

我也尝试从FileSaver.js保存方法，但它是同样的问题，pdf打开，但内容不显示。 谢谢

Answer 1

我在下载和显示PDF内容方面遇到了很多问题，我可能浪费了一两天的时间来解决这个问题，所以我将发布如何成功下载PDF或者在新标签中打开它的工作示例：

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

注意

另外值得一提的是，如果你要扩展Http类来为所有的请求添加headers或者类似的东西，那么下载PDF也会产生问题，因为你会覆盖RequestOptions ，这是我们添加responseType: ResponseContentType.Blob和this会得到你The request body isn't either a blob or an array buffer错误。

Answer 2

Amit，您可以通过在string的末尾添加一个variables来重命名文件名， saveAs(res, "myPDF.pdf");

变

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

someVariable可能是一个计数器或我个人最喜欢的date时间string。