从角度为5的字节数组中打开pdf

Question

我在Angular 5应用程序中遵循以下链接在新选项卡中显示pdf页面。但是无法达到目的。

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

PDF Blob未显示内容，Angular 2

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

Angular2显示PDF

我尝试了以下选项，但是它们都不起作用。

试验1

将响应消耗为json

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

}

服务

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

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

}

服务

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

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

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

}

试用3

以字节为单位消耗响应

component.ts

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

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

}

服务

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文档。

为了理解发布java spring控制器代码。

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

Answer 1

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

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

第二个问题是，即使您提到responseType：'arraybuffer'，也无法接受它。为此，您需要提及responseType：'arraybuffer'为'json'。（参考）

以下更正的工作代码。

试用3

component.ts（不变）

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

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

服务

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