PDF Blob 未显示内容，Angular 2 [英] PDF Blob is not showing content, Angular 2

问题描述

我有与此非常相似的问题 PDF Blob - 弹出窗口不显示内容，但我使用的是 Angular 2.问题的回应是将 responseType 设置为 arrayBuffer，但它在 Angular 2 中不起作用，错误是类型 RequestOptionsArgs 中不存在响应类型.我也尝试通过 BrowserXhr 扩展它，但仍然不起作用(https://github.com/angular/http/issues/83).

I have problem very similar to this PDF Blob - Pop up window not showing content, but I am using Angular 2. The response on question was to set responseType to arrayBuffer, but it not works in Angular 2, the error is the reponseType does not exist in type RequestOptionsArgs. I also tried to extend it by BrowserXhr, but still not work (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方法:

And the handleResponse method:

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打开了，但是内容不显示.谢谢

I also tried to saveAs method from FileSaver.js, but it is the same problem, pdf opens, but the content is not displayed. Thanks

推荐答案

我在下载和显示 PDF 内容时遇到很多问题，我可能浪费了一两天时间来修复它，所以我将发布工作示例如何成功下载 PDF 或在新标签页中打开它:

I had a lot of problems with downloading and showing content of PDF, I probably wasted a day or two to fix it, so I'll post working example of how to successfully download PDF or open it in new tab:

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 的地方，这将使您 请求正文既不是 blob 也不是数组缓冲区 错误.

It is also worth mentioning that if you are extending Http class to add headers to all your requests or something like that, it can also create problems for downloading PDF because you will override RequestOptions, which is where we add responseType: ResponseContentType.Blob and this will get you The request body isn't either a blob or an array buffer error.

这篇关于PDF Blob 未显示内容，Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！