从angular 5中的字节数组打开pdf

Question

我在angular 5应用程序的新选项卡中显示pdf页面时，遵循以下链接。但不能实现该结果。

我正在使用Spring控制器api中的字节数组。

PDF斑点不显示内容，角度2

PDF 斑点 - 弹出窗口不显示内容

Angular2显示PDF

我尝试了以下选项，但没有一个是可行的。

将响应消费为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);
})

}

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

}

将响应消费为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);
})

}

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

}

以字节形式使用响应

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

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

了解发布javaSpring控制器代码。

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.js？

• https://github.com/VadimDez/ng2-pdf-viewer

示例用法:

<pdf-viewer [src]="pdfSrc" 
    [render-text]="true"
    style="display: block;">
</pdf-viewer>

pdfSrc可以是url字符串，也可以是UInt8Array

Answer 2

我在angular和pdf显示中遇到了同样的问题。我将描述我的解决方案——使用base64编码字符串。所有现代浏览器都支持base64。

>

使用导入 Java.util.Base64 解码字节数组

byte[] bytes = baos.toByteArray();

String string = Base64.getEncoder().encodeToString(bytes);

test.setByteString(string);

在前端，使用标准哑剧类型作为pdf，并表明您正在使用base64数据：应用程序/pdf;base64，。

参考mime类型：https://en.wikipedia.org/wiki/Media_type

如果您需要在新窗口中打开文档：

let newPdfWindow = window.open("","Print");

let content = encodeURIComponent(response.byteString);

let iframeStart = "<\iframe width='100%' height='100%' src='data:application/pdf;base64, ";

let iframeEnd = "'><\/iframe>";

newPdfWindow.document.write(iframeStart + content + iframeEnd);

如果您需要在新选项卡中打开，您只需向您的html href提供：

let pdfHref = this.sanitizer.bypassSecurityTrustUrl('data:application/octet-stream;base64,' + content);

绕过安全信任网址将清理您的网址。我记得，角度安全性存在一些问题，这使我无法看到内容。

PS.在检查angular如何工作之前，我建议您将pdf文件存储在驱动器上，并尝试打开它。我的意思是，你应该确定你的文件是有效的，你可以用简单的阅读器打开它。

使现代化最简单的解决方案是使用pdf。js库https://github.com/mozilla/pdf.js

Answer 3

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

第一个问题是，我在Http标题中给出了“响应类型”，这是错误的。它应该在外面，如下所示。

2nd问题是，即使你提到响应类型：“数组缓冲区”，它也无法接受它。为此，您需要提及响应类型：“数组缓冲区”作为“json”。（参考资料）

下面是正确的工作代码。

审判3

组成部分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

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