Открыть pdf из байтового массива в угловых 5

Question

Я следовал по ссылкам ниже для отображения страницы PDF в новой вкладке в моем приложении angular 5.Но не удается достичь результата.

Я использую массив байтов из API контроллера пружины.

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

}

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

}

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

}

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

}

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

}

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.

Для понимания публикации кода контроллера 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;
}

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 string или UInt8Array

Answer 2

Наконец, я смог сделать PDF. С моей стороны были две небольшие ошибки.

1-ая проблема была, я дал 'responseType' внутри HttpHeaders, что было неправильно. Это должно быть снаружи, как показано ниже.

2-я проблема была, даже если вы упомянули как responseType: 'arraybuffer', он не смог ее принять. Для этого вам нужно указать в качестве responseType: 'arraybuffer' как 'json'. ( Reference )

Исправленный и рабочий код ниже.

Пробная версия 3

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

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

Answer 3

У меня была такая же проблема с угловым и pdf дисплеем. Я опишу свое решение - используйте строку в кодировке base64. Все современные браузеры поддерживают base64.

1. Используйте import java.util.Base64 для декодирования вашего байтового массива

   byte[] bytes = baos.toByteArray();
   
   String string = Base64.getEncoder().encodeToString(bytes);
   
   test.setByteString(string);
   

2. На стороне интерфейса используйте стандартный тип MIME для PDF и укажите, что вы используете base64 data:application/pdf;base64,.

   Ref. на типы пантомимы: 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);
   

3. Если вам нужно открыть новую вкладку, вы можете просто указать html href:

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

   bypassSecurityTrustUrl очистит ваш URL. Насколько я помню, была некоторая проблема с угловой безопасностью, которая мешала мне видеть контент.

PS. Прежде чем проверять, как он работает с angular, я бы порекомендовал вам сохранить файл PDF на диске и попробовать открыть его. Я имею в виду, что вы должны быть уверены, что ваш файл действителен, и вы можете открыть его простым читателем.

Обновление. Самое простое решение - использовать библиотеку pdf.js https://github.com/mozilla/pdf.js