从角度5的字节数组中打开pdf [英] Open pdf from bytes array in angular 5

问题描述

我正在跟踪以下链接，以在我的angular 5应用程序的新选项卡中显示pdf页面.但无法达到结果.

I was following the below links for displaying pdf page in new tab in my angular 5 application. But unable to achieve the result.

我正在使用spring控制器api中的bytes数组.

I am consuming the bytes array from spring controller api.

PDF Blob未显示内容，Angular 2

PDF Blob-弹出窗口未显示内容

Angular2显示PDF

我尝试了以下选项，但没有一个起作用.

I tried the below options but none of them is working.

将响应视为json

component.ts

component.ts

clickEvent(){
this.service.getPDF().subscribe((response)=>{

  let file = new Blob([response.byteString], { type: 'application/pdf' });            
  var fileURL = URL.createObjectURL(file);
  window.open(fileURL);
})

}

service.ts

service.ts

getPDF(){
const url = `${this.serviceUrl}/pdf`;

const httpOptions = {
  headers: new HttpHeaders(
    {
      'Accept': 'application/json',
      'responseType':'blob'
    }
  )
};

return this.http.get<any>(url, httpOptions);

}

审判2

将响应视为json

Trial 2

Consumed the response as json

component.ts

component.ts

clickEvent(){
this.service.getPDF().subscribe((response)=>{

  let file = new Blob([response.byteArray], { type: 'application/pdf' });            
  var fileURL = URL.createObjectURL(file);
  window.open(fileURL);
})

}

service.ts

service.ts

getPDF(){
const url = `${this.serviceUrl}/pdf`;

const httpOptions = {
  headers: new HttpHeaders(
    {
      'Accept': 'application/json',
      'responseType':'arraybuffer'
    }
  )
};

return this.http.get<any>(url, httpOptions);

}

试验3

将响应视为字节

Trial 3

Consumed the response as bytes

component.ts

component.ts

clickEvent(){
this.service.getPDF().subscribe((response)=>{

  let file = new Blob([response], { type: 'application/pdf' });            
  var fileURL = URL.createObjectURL(file);
  window.open(fileURL);
})

}

service.ts

service.ts

getPDF(){
const url = `${this.serviceUrl}/pdf`;

const httpOptions = {
  headers: new HttpHeaders(
    {
      'responseType':'blob'                 //both combination
      //'responseType'  : 'arraybuffer'
    }
  )
};

return this.http.get<any>(url, httpOptions);

}

通过所有组合，我只能得到两个结果. 清空pdf文档或无法加载PDF文档.

By all the combination I am only getting two results. Empty pdf document or Failed to load PDF document.

用于了解发布Java spring控制器代码的情况.

For understanding posting java spring controller code.

controller.java

controller.java

@GetMapping(value = "/pdf")
public ResTest generatePDF(HttpServletResponse response) throws IOException {
    ResTest test = new ResTest();
    ByteArrayOutputStream baos = docTypeService.createPdf();
    test.setByteArray(baos.toByteArray());
    test.setByteString(new String(baos.toByteArray()));
    return test;
}

推荐答案

最后，我能够渲染pdf.我这边有两个小错误.

At last, I was able to render pdf. There were two small mistakes from my side.

第一个问题是，我在HttpHeaders中输入了"responseType"，这是错误的. 它应该在外面，如下所示.

1 st Problem was, I gave 'responseType' inside HttpHeaders which was wrong. It should be outside as below.

2 nd问题是，即使您提到responseType:'arraybuffer'，它也无法使用它.为此，您需要提及responseType:'arraybuffer'为'json'.(参考 )

2 nd Problem was, even though if you mention as responseType : 'arraybuffer', it was unable to take it. For that you need to mention as responseType : 'arraybuffer' as 'json'.(Reference)

下面已更正且有效的代码.

The corrected and working code below.

试验3

component.ts(不变)

component.ts (nochanges)

clickEvent(){
  this.service.getPDF().subscribe((response)=>{

  let file = new Blob([response], { type: 'application/pdf' });            
  var fileURL = URL.createObjectURL(file);
  window.open(fileURL);
})

service.ts

service.ts

getPDF(){
const url = `${this.serviceUrl}/pdf`;

const httpOptions = {
  'responseType'  : 'arraybuffer' as 'json'
   //'responseType'  : 'blob' as 'json'        //This also worked
};

return this.http.get<any>(url, httpOptions);

}

来自下面的链接

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

这篇关于从角度5的字节数组中打开pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！