Angular API File Download

A guide on how to download files from API in Angular.

Frame courtesy — চালচিত্র / The Kaleidoscope (1981)
Frame courtesy — চালচিত্র / The Kaleidoscope (1981)

There is a specific use case when the service API request sends back a file as BLOB and we need to have the file downloaded in the user system through the browser (and not directly writing the file into the user system).

The code changes are pretty basic but figuring out these things for the first time might get confusing (it at least was in my case!) and hence, this article.

Prerequisites

I have referred to a custom method serviceWrapper() that I use in my Angular applications. For an insight on how I work with APIs, you can refer to this article —

Optimized Service/ API Integration for Angular

TL; DR

  • Use file-saver for saving the incoming BLOB as a file.
  • Set responseType as “blob” for the HTTP request.

Preparing file-saver package

We will use the following commands to install the package along with the type definitions —

npm install file-saver --save

npm install @types/file-saver --save-dev

Calling the API with responseType and file-saver

We will use the saveAs() method in file-saver package to save the incoming BLOB as a file. However, to receive the file as a BLOB, the responseType needs to be set as well.

Next Steps

You can refer to my Git repo for all the code. The working example in the sample application can be accessed from the “File Download” page

Working example in sample application

Front-end developer. Code commentator. Inventor of Modhyobitto Application Design (M.A.D.) principles.