PDF Blob 未显示内容，Angular 2

Question

我遇到的问题与此非常相似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 方法：

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 内容时遇到了很多问题，我可能浪费了一两天时间来修复它，所以我将 post 如何成功下载 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 class 以将 headers 添加到您的所有请求或类似的东西，它也会对下载 PDF 造成问题，因为您将覆盖 RequestOptions，这是我们添加 responseType: ResponseContentType.Blob 的地方，这将使您出现 The request body isn't either a blob or an array buffer 错误。

Answer 2

阿米特，您可以通过在字符串末尾添加变量来重命名文件名所以 saveAs(res, "myPDF.pdf");

变成

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

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

Answer 3

ANGULAR 5

我遇到了同样的问题，我为此浪费了几天时间。

这里我的回答可能会对其他人有所帮助，这有助于呈现 pdf。

对我来说，即使我提到 responseType : 'arraybuffer'，它也无法接受。

为此你需要提及 as responseType : 'arraybuffer' as '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);
    }
}

参考以下link

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

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) : returns 文件响应的 REST 服务 文件响应本身将由 Jetty 自动解析为 pdf blob 文件（由于注释 @Produces("application/pdf") ），另外发送给 Web 客户端并由其读取

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

客户端代码 (angular 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

PDF Blob is not showing content, Angular 2

pdf

angular

bytearray

blob