PDF Blob 不显示内容，Angular 2

Question

我遇到的问题与此非常相似PDF Blob - Pop up window not showing content ，但我使用的是 Angular 2。问题的响应是将 responseType 设置为 arrayBuffer，但它在 Angular 2 中不起作用，错误是 reponseType 在类型 RequestOptionsArgs 中不存在。我也尝试通过 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 中的 saveAs 方法，但它是同样的问题，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' })
        }
}

我的组件.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 的地方，这将使您 The request body isn't either a blob or an array buffer 错误。