Angular 6: Download file after getting File object from backend server

Question

I have a File object type of structure {type: "Buffer", data: Array(702549)}, what do I need to do in angular 6 in order to download this file in browser?

I get my response from this function:

  getMarketingProposalById(id: string): Observable<MarketingProposal> {
    return this.httpClient.get<MarketingProposal>(this.apiUrl  + id , this.httpOptions).pipe(map(marketingProposal => {
      if (marketingProposal.materials[0] && marketingProposal.materials[0].file) {
        const blob = new Blob([marketingProposal.materials[0].file.data], { type: 'image/png' });
        console.log(blob);
        // saveAs(blob, 'hello.png');
      }
      const marketingProposalObject = this.assignMarketingProposalObject(marketingProposal);
      this.mapStringToDate(marketingProposalObject);
      return marketingProposalObject;
    }));
  }

marketingProposal.materials[0].file is in the format {type: "Buffer", data: Array(702549)}

Dmitriy Snitko · Accepted Answer · 2018-09-11T16:25:48.847

6

You can use file-saver to do this: https://www.npmjs.com/package/file-saver

File download code:

import { saveAs } from 'file-saver';

loadFile(fileId: number) {
   try {
       let isFileSaverSupported = !!new Blob;
   } catch (e) { 
       console.log(e);
       return;
   }

   this.repository.loadFile(fileId).subscribe(response => {
       let blob = new Blob([response.data], { type: 'application/pdf' });
       saveAs(blob, `file${fileId}.pdf`);
   });
}

UPDATE: I'v created a test project according to load conditions:

http.get('http://localhost:4200/assets/image.png', {responseType: 'blob'}).subscribe(response => {
  try {
      let isFileSaverSupported = !!new Blob;
  } catch (e) { 
      console.log(e);
      return;
  }
  let blob = new Blob([response], { type: 'image/png' });
  saveAs(blob, `file.png`);
});

edited Sep 11 '18 at 16:25

answered Sep 11 '18 at 14:55

Dmitriy Snitko

931
5
14

what if the file is not a pdf but a png? – Shaun Chua Sep 11 '18 at 15:11
Set the type to image/png, and extension .png – Dmitriy Snitko Sep 11 '18 at 15:25
ok i was able to download it, but for some reason the file is corrupted, do you know if retrieving it from the server causes the data to become a different array type? – Shaun Chua Sep 11 '18 at 15:32
Could you please provide the code how you get the http response from server. It actualy depends on how browser loads it – Dmitriy Snitko Sep 11 '18 at 15:44
Try to set { responseType: "blob"} in your httpOptions – Dmitriy Snitko Sep 11 '18 at 16:02
found the issue, i can to convert the array to Uint8Array before converting to Blob – Shaun Chua Sep 11 '18 at 16:08
I represented a test project, and updated my answer. Let me know if it was useful for you. – Dmitriy Snitko Sep 11 '18 at 16:28

Angular 6: Download file after getting File object from backend server

1 Answers1

Linked