How can I open a PDF from array of bytes in Angular 9?

Question

I have a WebApi method that returns a byte array to an angular frontend. I have tried everything from reading it as a Blob, reading it as an arraybuffer, converting it to a Blob from the byte array, nothing works. Everytime i get the cannot open pdf error.

Sample code in component:

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

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

Sample code in 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);

}

Answer 1

Problem can exist in angular's HttpClient which for some reason doesn't read your response as an array buffer correctly. Try to convert it into Uint8Array before, it could give you proper structure that would become ready to further process:

Try that:

const blob = new Blob([new Uint8Array(byteArrays)], { type: "application/pdf" });
    const exportUrl = URL.createObjectURL(blob);
    window.open(exportUrl);
    URL.revokeObjectURL(exportUrl);