Convert byte array into blob (pdf file) and download using angular 5

Question

I'm receiving a byte array from server side and has converted it successfully to blob. However, when I'm trying to download it, it shows the file is corrupted. Below are my codes -

// In client side controller
this.contractsService.downloadPdf(id)
      .then((result) => {
        var blob = new Blob([result], { type: "application/pdf" });
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "testing.pdf";
        link.click();
      });

And,

// In client side service
private headers = new HttpHeaders({ 'Content-Type': 'application/json' });
downloadPdf(id: number) {
    return this.http.get(this.apiRoutes.download + "/" + id, { headers: this.headers })
      .map((res: any) => res)
      .toPromise();
  }

Any sort of help will be very much appreciated. Thank you.

Look into the documentation for the http client that does the ajax request. You need to make sure that the generated result is a Blob (treated as binary) and not a string (treated with shenanigans and evil encodings). This is probably another parameter or setting to the this.http.get(...) call. — sisve
– sisve, Commented Mar 13, 2018 at 7:35

alsami · Accepted Answer · 2018-03-13 08:30:24Z

6

Install file-saver

npm i --save file-saver@latest

Your service method

downloadPdf(id: number) {
    return this.http
              .get(this.apiRoutes.download + "/" + id, { responseType:'blob' })
      .toPromise();
  }

Now in your component

import { saveAs } from 'file-saver'

this.contractsService.downloadPdf(id)
      .then(blob=> {
         saveAs(blob, 'testing.pdf');
      });

This should do the trick. The HttpClient will now extract the file from the stream. Also have a look in the documentation for blobs with the HttpClient.

answered Mar 13, 2018 at 8:30

alsami

9,9233 gold badges33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

alsami Over a year ago

When you open the url of your api directly via browser and download the file, does it work? Either u are using legacy http client or the file that is served is corrupt in the first place.

Raj Over a year ago

When I'm downloading the file on the server side locally, it works perfectly. However, when I'm converting it to byte array and sending to the client side for downloading, it's getting corrupted. P.S. no, the file is showing corrupted when I open it manually from the URL as well.

alsami Over a year ago

Ah okay, then it is your API that is doing wrong, not the client.

alsami Over a year ago

You don't need to provide a temporary file, just a byte array and a filecontent-result. Please see stackoverflow.com/a/48864842/5397642

alsami Over a year ago

It's just a class that implements IActionResult and returns a file as byte array. Will set special response headers like content-disposition, file name and so on. You can read more about it here learn.microsoft.com/en-us/dotnet/api/…

|

user2590928 · Accepted Answer · 2018-03-13 07:57:15Z

0

In client side service, try explicitly setting the response type of the get request:

downloadPdf(id: number) {
    return this.http.get(this.apiRoutes.download + "/" + id, { headers: this.headers; responseType: 'arraybuffer' })
      .map((res: any) => res)
      .toPromise();
  }

answered Mar 13, 2018 at 7:57

user2590928

17610 bronze badges

Collectives™ on Stack Overflow

Convert byte array into blob (pdf file) and download using angular 5

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related