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中保存AsAs方法，但是同样的问题，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添加到您的所有请求或类似内容中，它也会因为您将覆盖{{1 }}，这是我们添加RequestOptions的地方，这会导致responseType: ResponseContentType.Blob错误。

Answer 2

ANGULAR 5

我有同样的问题，我在那几天就失去了。

在这里，我的回答可以帮助其他人，这有助于提供pdf。

对我而言，即使我提到responseType：'arraybuffer'，也无法接受它。

为此您需要提及responseType：'arraybuffer'为'json'。（Reference）

工作代码

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

从以下链接中提及

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

Answer 3

阿米特，您可以通过在字符串末尾添加变量来重命名文件名所以HEAD

成为

saveAs(res, "myPDF.pdf");

其中someVariable可能是一个计数器或我个人最喜欢的日期时间字符串。

Answer 4

这对我有用

 var req = this.getPreviewPDFRequest(fd);
        this.postData(environment.previewPDFRFR, req).then(res => {
          res.blob().then(blob => {
            console.clear();
            console.log(req);
            console.log(JSON.stringify(req));
            const fileURL = URL.createObjectURL(blob);
            window.open(fileURL, '', 'height=650,width=840');
          })
        });

Answer 5

服务器端（Java/Jetty）：返回文件响应的 REST 服务 文件响应本身将被 Jetty 自动解析为 pdf blob 文件（因为注释 @Produces("application/pdf") ），其他将被发送到网络客户端并由网络客户端读取

    @GET
    @Path("/download-pdf/{id}")
    @Produces("application/pdf")
    public Response downloadPDF(@ApiParam(value = "Id of the report record")
                            @PathParam("id") Long id) {
        ResponseBuilder response = null;
        try {
            PDFReportService service = new PDFReportService();
            File reportFile = service.getPDFReportFile(id);

            response = Response.ok((Object) reportFile);  
            response.header("Content-Disposition","attachment; filename="+reportFile.getName());  
            return response.build();
        } catch (DomainException e) {
            response = Response.serverError().entity("server.error");
        }
        return response.build();
    }

客户端代码（角度 2）：抓取 blob 并将其打印在新的浏览器标签中

关键是确保您将请求响应读取为 blob（因为服务器返回 blob；在我的情况下）

现在，我非常努力，但我终于发现 Angular 2 没有实现任何函数来处理 blob 响应（res['_body'] 和 res.blob() 都不适合我）

所以我发现除了使用 JQuery ajax 执行该文件 blob 请求之外没有其他解决方法，如下所示：

public downloadPDFFile() {
    let fileURL = serverURL+"/download-pdf/"+id;
    let userToken: string = your_token;

    showWaitingLoader();

    $.ajax({
        url: fileURL,
        cache: false,
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Basic " + userToken
        },
        xhrFields: {
            responseType: 'blob' //Most important : configure the response type as a blob
        },
        success: function(blobFile) {
            const url = window.URL.createObjectURL(blobFile);
            window.open(url);
            stopWaitingLoader();
        },
        error: function(e){
            console.log("DOWNLOAD ERROR :", e);
        }
    });
}

PDF Blob没有显示内容，Angular 2

5 个答案: