How do I save a blob response type in Angular 4+

Question

So I am calling an API, which returns to my Angular a file, like so:

getFile(fileInformation) {
  const req = new HttpRequest('POST', 'filedownload', fileInformation, { reportProgress: true, responseType: "blob" });
  return this.http.request(req);
}

And in the API Controller (I followed this SO top answer to figure this step out):

Public Function GetFile(fileInformation As FileDto) As HttpResponseMessage
    Dim filePath = Path.Combine(FileConstants.FilePath, fileInformation.FileType, fileInformation.FileName)
    Dim fileStream = New FileStream(filePath, FileMode.Open, FileAccess.Read)

    Dim result = new HttpResponseMessage(HttpStatusCode.OK)
    result.Content = New StreamContent(fileStream)
    result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream")

    Return result
End Function

The returned result from this call is of HttpResponse, and the body is of type Blob.

HttpResponse: {
  blob: {
    size: 289940,
    type: "application/octet-stream"
  },
  headers: ...,
  status: 200,
  ...
}

How do I now trigger a download for this file in the Angular component where I receive the response?

in Angular2 (4) I simply installed FileSaver and then imported it into my class and then ran FileSaver.saveAs(blob, fileName); — Jason Spradlin
– Jason Spradlin, Commented Oct 27, 2017 at 19:07

Robert Taylor · Accepted Answer · 2020-01-15 20:29:57Z

23

install FileSaver from npm.

npm install --save file-saver

import it into your class where you have the blob instance

import * as FileSaver from 'file-saver';

Then just call

FileSaver.saveAs(blob, fileName);

edited Jan 15, 2020 at 20:29

Robert Taylor

3,0863 gold badges23 silver badges19 bronze badges

answered Oct 27, 2017 at 19:16

Jason Spradlin

1,4279 silver badges14 bronze badges

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

4 Comments

RVP Over a year ago

You saved me a lot of ugly code with this package. Thanks!

Jason Spradlin Over a year ago

This package saved me a lot of ugly code, as well. :D

Gregor Albert Over a year ago

For Angular 10 there is warning: "CommonJS or AMD dependencies can cause optimization bailouts." due to using file-saver.

Gaspa79 Over a year ago

@GregorAlbert Oh no! A warning? What a nightmare!

Abolfazl Roshanzamir · Accepted Answer · 2021-04-16 12:02:20Z

5

As @Jason Spradlin pointed out you can use FileSaver package

There is another package to save file :

npm install @progress/kendo-file-saver --save

Usage:

import { saveAs } from '@progress/kendo-file-saver'

saveAs(data: string | Blob, fileName: string, options?: SaveOptions)

1-Data is base64

const result = `data:${YOUR_MIME_TYPE};base64,` + YOUR_DATA;
saveAs(result, YOUR_FILE_NAME);

2-Data is Blob

saveAs(YOUR_DATA, YOUR_FILE_NAME);

Manually:

const file = new window.Blob([data], { type: contentType });

const downloadAncher = document.createElement("a");
downloadAncher.style.display = "none";

const fileURL = URL.createObjectURL(file);
downloadAncher.href = fileURL;
downloadAncher.download = fileName;
downloadAncher.click();

answered Apr 16, 2021 at 12:02

Abolfazl Roshanzamir

15.1k9 gold badges76 silver badges83 bronze badges

1 Comment

Gaspa79 Over a year ago

Will new window trigger popup blockers? (in 'manually' code). (Also: it's anchor with an o =P)

Collectives™ on Stack Overflow

How do I save a blob response type in Angular 4+

2 Answers 2

4 Comments

1-Data is base64

2-Data is Blob

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1-Data is base64

2-Data is Blob

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related