Ways to download large files in Angular using HTTP Client

File download is one of the most common scenarios in web applications. The easiest way to download a file is to open a blank browser and the file starts downloading. This article demonstrates ways to download files using the Angular framework.

Photo by Maksym Kaharlytskyi on Unsplash

Downloading using URL:

The easiest way to download a file is to open the file URL in the browser with blank. This way is pretty easy to use windows object and pass the URL to a blank window. The main drawback of this method is when the parameter grows the URL becomes larger and can reach to max length limit. Though max length depends on browser to browser, in general, it is 2K characters.

formSubmit(){
if(this.form.status===”VALID”)
{
(windows as any).open(`${environment.baseURL}/file/downloadfile?parameter1=${JSON.stringify(this.param1)}&parameter2=${JSON.stringify(this.param2)}`,
'_blank');
}
}

Downloading using Angular HTTP client in the GET call:

Downloading large files using Angular HTTP Get is fairly easy. First, need to install the file saver component.

npm i file-saver